使用ng-repeat循环遍历要打印编号标题的对象数组。

例如：

控制器

var cars = [ 
    {make:'ford',model:'mustang'}, 
    {make:'ford',model:'fusion'}, 
    {make:'bwm',model:'x5'}, 
    {make:'honda',model:'civic'}, 
    {make:'honda',model:'accord'}, 
    {make:'toyota',model:'camry'}, 
    {make:'honda',model:'crv'}, 
];

查看

<div ng-repeat="car in cars" ng-show="car.make=='ford'"> 
    <h1>Fords:</h1> 
    <div><b>{{$index}})</b> {{car.model}}</div> 
</div> 

<div ng-repeat="car in cars" ng-show="car.make=='honda'"> 
    <h1>Hondas:</h1> 
    <div><b>{{$index}})</b> {{car.model}}</div> 
</div>

期望输出

Fords: 
0) mustang 
1) fusion 

Hondas: 
0) civic 
1) accord 
2) crv

实际输出

Fords: 
0) mustang 
1) fusion 

Hondas: 
3) civic 
4) accord 
6) crv

换言之，每次循环$索引内保持与源阵列的引用。我认为这是有道理的，但我认为$ index的目的是为了计算给定循环范围内的迭代次数？

如何使用$ index（或别的东西）来实现我的预期输出？

来源

2017-02-11 yevg

发生的事情，因为你的预期O/P不工作'$ index'的本金去.index将打印数组中元素的实际索引。 –

你可以做一些像orderBy的make道具。它并非严格的解决方案此外，您可以使用自定义filter通过make属性创建分组对象的新集合。

标记

<div ng-repeat="car in cars | orderBy: 'make'"> 
    <h1 ng-if="cars[$index].make != cars[$index-1].make"> 
     {{car.make}}: 
    </h1> 
    <div><b>{{$index + 1}})</b> {{car.model}}</div> 
</div>

Demo Here

来源

2017-02-11 04:22:05

一个简单的解决方案是创建一个过滤阵列这只会返回匹配elements.Then可以使用$index正确打印的顺序号。

<body ng-app="textInputExample"> 
    <script> 
    angular.module('textInputExample', []) 
     .controller('ExampleController', ['$scope', function($scope) { 
     var cars = [{ 
      make: 'ford', 
      model: 'mustang' 
     }, { 
      make: 'ford', 
      model: 'fusion' 
     }, { 
      make: 'bwm', 
      model: 'x5' 
     }, { 
      make: 'honda', 
      model: 'civic' 
     }, { 
      make: 'honda', 
      model: 'accord' 
     }, { 
      make: 'toyota', 
      model: 'camry' 
     }, { 
      make: 'honda', 
      model: 'crv' 
     }, ]; 
     $scope.cars = cars; 
     $scope.filteredcars = function(make){ 
      return $scope.cars.filter(function(e) { return e.make === make }); 
     }; 

     }]); 
    </script> 
    <div ng-controller="ExampleController"> 
    <div ng-repeat="car in filteredcars('honda')"> 
     <h1>Hondas:</h1> 
     <div><b>{{$index}})</b> {{car.model}}</div> 
    </div> 
    </div> 
</body>

来源

2017-02-11 04:34:40

Demo link这里。

VIEW：

<div ng-app ng-controller="Main"> 
    <div ng-repeat="carPerMake in carsToFilter() | filter:filterMake"> 
    <b>{{carPerMake.make}}:</b> 
    <div ng-repeat="car in cars | filter:{make: carPerMake.make}"> {{$index}} - {{car.model}}</div> 
    <br> 
    </div> 
</div>

控制器：

function Main($scope) { 
    $scope.cars = [{ 
    make: 'ford', 
    model: 'mustang' 
    }, { 
    make: 'ford', 
    model: 'fusion' 
    }, { 
    make: 'bwm', 
    model: 'x5' 
    }, { 
    make: 'honda', 
    model: 'civic' 
    }, { 
    make: 'honda', 
    model: 'accord' 
    }, { 
    make: 'toyota', 
    model: 'camry' 
    }, { 
    make: 'honda', 
    model: 'crv' 
    }, ]; 

    var makeArr = []; 

    $scope.carsToFilter = function() { 
    makeArr = []; 
    return $scope.cars; 
    } 

    $scope.filterMake = function(car) { 
    var newMake = makeArr.indexOf(car.make) == -1; 
    if (newMake) { 
     makeArr.push(car.make); 
    } 
    return newMake; 
    } 
}

输出：

福特： 0 - 野马 1 - 融合

BWM： 0 - X5

本田： 0 - 公民 1 - 雅阁 2 - CRV

丰田： 0 - 凯美瑞

来源

2017-02-11 06:53:56 user7348450

Angular ng-repeat - 跨多个循环的唯一$索引

回答

VIEW：

控制器：

输出：

Angular ng-repeat - 跨多个循环的唯一$索引

回答

VIEW：

控制器：

输出：

相关问题