在 AngularJs 表达式中使用 ng-repeat's $index 变量

Question

我有一个ng-repeatdiv，我需要使用$index变量来构建一个表达式。考虑以下内容:

<div ng-repeat="item in myItems track by $index">
   This will throw an error: {{myItemId_{{$index}}.someProperty}}
</div>

如果我有一个$scope变量称为"myItemId_0"，我如何使用$index内花括号{{}}表达式?我试过省略$index变量的花括号，但这也不起作用:

{{myItemId_ $ index.someProperty}}

Answer 1

由于它是作用域上的变量，因此创建一个函数，通过括号表示法检索您的属性。

HTML:

{{getByIndex($index, "someProperty")}}

控制器:

$scope.getByIndex = function(index, someProperty) {
    var propertyName = "myItemId_" + index;
    return $scope[propertyName][someProperty];
}

然而，合乎逻辑的解决方案是根本不以这种方式访问属性，而是使用ng-repeat中已经可用的item。

HTML:

div ng-repeat="item in betterItems track by $index">
    {{item.someProperty}}
</div>

控制器:

$scope.betterItems = [];
angular.forEach(myItems, function (i) {
    $scope.betterItems.push(createMappedItem(i));
}

即使您必须将您的集合映射到一个新的集合(或者在需要时重用相同的集合)，您仍然可以访问原始项。它更干净，更容易维护。此外，如果您开始改变集合，那么通过索引进行检索可能非常危险。