Question

我正在使用ng-repeat重复某些项目，但当$index达到某个数字时，我想在该数字后更改$scope。

所以我要说：我有一个ng-repeat，我有这个属性：

ng-attr-cy="{{ team1.cy }}"

这在我的控制器$scope.team1.cy = 30;

中

我想要的是$index > 8它将范围的值更改为{8}之后的项目的$scope.team1.cy = 100。

我无法想出一个解决方案，我会说ng-if如何工作，但无法使其发挥作用。

Answer 1

您可以这样写：

<div ng-repeat="number in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]" ng-init="$index > 8 ? team1.cy = 100 : ''">
</div>

在每次迭代时都会调用

ng-init，我们可以检查$index是否达到8，然后我们正在递增数字。

<强>更新

查看您的codepen示例，很明显我们无法直接更改team1.cy变量，在$index达到8后将其更新为100。

因此，除非您想在其他地方使用变量team1.cy，否则您可以像这样解决问题：

<circle ng-repeat="person in team1.members"
    class="dotMap"
    ng-click="mapCurrentPerson($event)"
    fill="#232323" stroke="#232323"
    stroke-miterlimit="10"
    ng-attr-cx="{{$index * 40 + 40}}"
    ng-attr-cy="{{ cyValue }}"
    ng-init="cyValue = ($index > 8 ? 100 : 30)"
    r="16.5"
    ng-class="{selectedMap: current.name === person.name}" />

如果ng-init中的表达式变得复杂，那么我建议您在控制器范围内编写一个函数，如下所示：

$scope.calculateCyValue = function($index) {
    return  ($index > 8 ? $index * 40 + 40 : $index * 40 + 40);
};

然后在HTML中使用它（现在你不需要ng-init）：

<circle ng-repeat="person in team1.members"
    class="dotMap"
    ng-click="mapCurrentPerson($event)"
    fill="#232323" stroke="#232323"
    stroke-miterlimit="10"
    ng-attr-cx="{{$index * 40 + 40}}"
    ng-attr-cy="{{ calculateCyValue($index) }}"
    r="16.5"
    ng-class="{selectedMap: current.name === person.name}" />

Answer 2

您可以将索引传递给vm上的方法并从那里返回所需的值：

ng-attr-cy="{{vm.getValue($index)}}"

vm.getValue = function(index){
   // do some magic with the index.
   return myData[index];
}

$ index达到一定数量后更新范围值

2 个答案: