angular.js - angularjs: How to implement nesting in ng-repeat?
给我你的怀抱
给我你的怀抱 2017-05-15 16:49:05
0
2
665
<p ng-repeat="links in slides">
    <p ng-repeat="link in links">{{link.name}}</p>
</p>

slides is a two-dimensional array. My above code will report an error: [ngRepeat:dupes]

$http.get('index.php?option=com_mtree&task=ajax.load').success(function(response) {
    if(response.status) {
        $scope.links = response.links;

        if(typeof response.links != 'undefined') {
            var slides = [], slide;
            for(var i=0; i<response.links.length;) {
                slide = [];
                for(var c=0; c<3&&c<response.links.length; c++, i++) {
                    slide.push(response.links.indexOf(i));
                }
                slides.push(slide);
            }
            $scope.slides = slides;
        }

        /*
        setTimeout(function(){
            jQuery('.saved-list .slideshow').cycle('destroy');
            jQuery('.saved-list .slideshow').cycle();
        }, 0);
        */
    }
});

How to implement nesting?

给我你的怀抱
给我你的怀抱

reply all(2)
过去多啦不再A梦

Straight answer:

<p ng-repeat="links in slides">
    <p ng-repeat="link in links track by $index">{{link.name}}</p>
</p>

Error: [ngRepeat:dupes]This error message is specific to the subject of the question, which means that there are more than 2 identical numbers in the index group. ngRepeat does not allow two objects with the same ID in the collection

For example: item in items is equivalent to item in items track by $id(item). This implies that the DOM elements will be associated by item identity in the array.

For a numeric object, its id is its own value. Therefore, two identical numbers are not allowed to exist in the array. In order to avoid this error, you need to define your own track by expression. For example: item in items track by item.id或者item in items track by fnCustomId(item)。嫌麻烦的话,直接拿循环的索引变量$index来用item in items track by $index

fiddle example: http://jsfiddle.net/shiedman/PLV6G/

刘奇

http://jsfiddle.net/Nelson_Pan/bcPxe/1

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template