Question

你可以帮我解决嵌套的ng-repeat中的索引吗？我无法找到正确的方法来获取prodata的前8个元素，然后是8个后续元素，然后是8个后续元素......等等。

<ion-slide-box show-pager="true" does-continue="true" on-slide-changed="slideHasChanged($index)">
        <ion-slide ng-repeat="s in [0,1,2,3,4,5,6,7,8,9]">
            <ul>
                <li ng-repeat="item in prodata | limitTo:8*s+8:8*s+0">
                {{s}}
                    <a class="suggestPro" href="#">
                        <span><img ng-src="img/boards/{{item.imageName}}" /></span>
                        <p class="flex-caption"> {{item.model}} - {{item.name}}</p>
                    </a>
                </li>
            </ul>
        </ion-slide>
    </ion-slide-box>

Answer 1

检查角度版本。指定begin参数的功能已添加到1.4版本的angular：

摘自angular's change log：

limitTo：扩展过滤器以获取开始索引参数（aaae3cc4，＃5355，＃10899）

您的代码将是：

<li ng-repeat="item in prodata | limitTo:8:8*s">

Answer 2

IMO最好的方式是重新格式化初始数组，使其适合与ng-repeat一起使用。例如：

var getSplittedArray = function (array, numberOfElements) {
    var newArray = [];
    for(var i = 0; i < array.length; i += 1) {
        if (i % numberOfElements === 0) {
            newArray.push([]);
        }
        newArray[newArray.length - 1].push(array[i]);
    }
    return newArray;
}

// Example: var realArray = someService.get();
$scope.splittedArray = getSplittedArray(realArray, 8);

视图中的示例用法：

<ion-slide-box show-pager="true" does-continue="true" on-slide-changed="slideHasChanged($index)">
    <ion-slide ng-repeat="set in splittedArray">
        <ul>
            <li ng-repeat="item in set">
            {{s}}
                <a class="suggestPro" href="#">
                    <span><img ng-src="img/boards/{{item.imageName}}" /></span>
                    <p class="flex-caption"> {{item.model}} - {{item.name}}</p>
                </a>
            </li>
        </ul>
    </ion-slide>
</ion-slide-box>

嵌套的ngrepeat，获取嵌套数组中的索引

2 个答案: