如何在ng-repeat angular js中使用$ index

I have posted my question How to create check box from multidimensional array using angular js

我已经发布了我的问题如何使用角度js从多维数组创建复选框

But I have not gotten any response. I have debug my code when I am going to add second ng-repeat I am getting

但我没有得到任何回应。当我要添加第二个ng-repeat时,我已经调试了我的代码

Error: ngRepeat:dupes Duplicate Key in Repeater

错误:ngRepeat:dupes Repeater中的重复键

When I am adding repeat by $index I am getting single character as key and value too

当我通过$ index添加重复时,我将获得单个字符作为键和值

Please help me I am new in angular js :(

请帮助我,我是角度js的新人:(

This is my fiddle of code http://jsfiddle.net/ashishoft/03L3faq5/2/

这是我的代码http://jsfiddle.net/ashishoft/03L3faq5/2/的小提琴

3 个解决方案

#1

Here is example:

这是一个例子:

ng-repeat="i in items track by $index"

#2

Pretty simple really. You can even use it in combination with custom directives etc. Its basically an index of where you are in the loop.

真的很简单。您甚至可以将它与自定义指令等结合使用。它基本上是您在循环中的位置的索引。

There are some flaws with using it though. If your creating an ng-repeat list, and then passing the $index into some click function or something, then you can have issues if your also using filtering on that same list. The $index can fall out of sync with the filters and leave you wondering why its giving you wrong data.

但是使用它有一些缺陷。如果你创建一个ng-repeat列表,然后将$ index传递给某些click功能,那么如果你也在同一个列表上使用过滤,则会出现问题。 $ index可能与过滤器不同步,让您想知道为什么它会给您错误的数据。

for example:

<li ng-repeat="page in links | someFilter:filter">
    <a ng-click="someFunction($index)">{{ someData }}</a>
</li>

vs the better way of:

与更好的方式:

<li ng-repeat="itemX in someData | someFilter:filter">
    <a ng-click="someFunction(itemX)">{{ itemX.name }}</a>
</li>

So although I use the $index in my example below, its often best just to pass the whole object in when doing more complex functions per row.

因此,虽然我在下面的示例中使用$ index,但通常最好只在每行执行更复杂的函数时传递整个对象。

HTML:

<div ng-app="myApp" ng-controller="MainCtrl">
    <ul>
        <li ng-repeat="page in links">
            <a ng-class="{ testClass: $index == pageNumber }" ng-click="setPageNumber($index)">{{ page }}</a>
        </li>
    </ul>
</div>

Javascript:

var app = angular.module('myApp', []);

app.controller('MainCtrl', function($scope) {
    $scope.links = [
        'Link One',
        'Link Two',
        'Link Three'
    ];

    $scope.pageNumber = 0;
    $scope.setPageNumber = function(index) {
        $scope.pageNumber = index;
    }
});

CSS:

.testClass {
    background: black;
    color: white;
}

#3

This is a sample of how it could be written, although using $index is just fine. Might I suggest using something else like the element id or title, here is an article that talks about ng-repeat.

这是一个如何编写它的示例,尽管使用$ index就可以了。可能我建议使用其他东西,如元素id或标题,这里有一篇文章讨论ng-repeat。

<div class="favorite-children" ng-repeat="photo in ctrl.favorties track by $index">
    <div class="card"></div>
</div>

  //or

<div class="favorite-children" ng-repeat="photo in ctrl.favorties track by photo.title">
  <div class="card"></div>
</div>

Update

Try this FIDDLE for a preview of a comprehensive JSON, with your same code previewed on how you can use it. Hope it helps.

尝试使用此FIDDLE预览全面的JSON,并预览相同的代码以了解如何使用它。希望能帮助到你。

#1