Question

我有一个类似于以下内容的数组：

[
    {
       make: 'Ferrari',
       cars: [{n: '458', y:'2012'}, {n: 'F40', y: '1987'}]
    },
       make: 'Lamborghini',
       cars: [{n: 'Countach', y: '1980'}, {n: 'Diablo', y: '1995'}]
    }
]

我像这样显示列表：

<div ng-repeat="m in carMakeList">
    <span>{{m.make}}</span>
    <ul>
        <li ng-repeat="c in m.cars" 
            ng-click="selectItem(c)"
            ng-class="{'highlight':(selectedIndex===$index)}">
            {{c.n}}
        </li>
    </ul>
</div>

我想要的是， $ index 到 CONTINUE ， NOT 重置在2 内部 car列表。

所以列表应如下所示：

$index=0 -> 458
$index=1 -> F40
$index=2 -> Countach
$index=3 -> Diablo

我该怎么做？

我尝试过使用ng-init来设置索引值并手动递增，但它似乎不起作用。它似乎总是重置。

Answer 1

$index是一个特殊范围属性，用于跟踪正在迭代的集合中对象的索引。您不应该重载该属性，而应使用您自己的scope属性或自定义函数来查找展平的索引。以下是自定义索引查找功能的示例：

$scope.carMakeList = [
    {
       make: 'Ferrari',
       cars: [{n: '458', y:'2012'}, {n: 'F40', y: '1987'}]
    }, {
       make: 'Lamborghini',
       cars: [{n: 'Countach', y: '1980'}, {n: 'Diablo', y: '1995'}]
    }
];
$scope.flattenedIndex = function(car) {
  var currentIndex = -1;
  var actualIndex = -1;
  $scope.carMakeList.forEach(function(eachBrand) {
    eachBrand.cars.forEach(eachCar) {
      currentIndex += 1;
      if (car === eachCar) {
        actualIndex = currentIndex;
      }
    }
  });
  return actualIndex;
}

<div ng-repeat="m in carMakeList">
  <span>{{m.make}}</span>
  <ul>
    <li ng-repeat="c in m.cars" ng-click="selectItem(c)" ng-class="{'highlight':(selectedIndex===flattenedIndex(c))}">
      {{c.n}}
    </li>
  </ul>
</div>

Answer 2

我对问题有不同看法。

我实际上用不同的方式解决了你的问题而不是解决$ index。我在这里使用了track by唯一标识符c.n。跟踪比你的$ index更有效，因为当你使用两个Ng重复时，$ index是一个严重的负载。

请提供反馈。

找到下面的代码加上小提琴。

<div ng-controller="myController">
<div ng-repeat="m in carMakeList">
    <span>{{m.make}}</span>
    <ul>
        <li ng-repeat="c in m.cars track by c.n" 
            ng-click="selectItem(c.n)"
            ng-class="{'highlight':(selectedIndex===c.n)}">
            {{c.n}}
        </li>
    </ul>
</div>
</div>

<强>控制器：

 var myApp = angular.module("myApp",[]);
    myApp.controller("myController",function($scope){
      $scope.actualIndex;
        $scope.selectItem = function(actualIndex){
        $scope.selectedIndex = actualIndex;
        };
    $scope.carMakeList = [
        {
           make: 'Ferrari',
           cars: [{n: '458', y:'2012'}, {n: 'F40', y: '1987'}]
        },
        {  make: 'Lamborghini',
           cars: [{n: 'Countach', y: '1980'}, {n: 'Diablo', y: '1995'}]
        }
    ];

    });

<强> CSS

.highlight {
    background-color:red;
}

这是小提琴： http://jsfiddle.net/3r14kq1x/

$ index - 不要重置

2 个答案: