是否可以在 AngularJS 的 ng-click 中添加 ng-repeat $index 值？

Question

在我的 HTML 中，我有一个用 ng-repeat 做的下拉列表。 单击这些元素中的每一个都需要有自己的功能，所以我使用 $index. 这是我的部分代码：

<div class="dropdown-menu status-menu" aria-labelledby="dropdownMenuButton">
   <span class="dropdown-item active" ng-click="allItems()">All Items</span>
   <span ng-repeat="x in itemsArray" class="dropdown-item"
         ng-click="myFunction{{$index}}()">{{x.name}}</span>
</div>

当我在浏览器中检查元素时，它实际上显示了这样的项目：

ng-click="myFunction0()", ng-click="myFunction1()", ng-click="myFunction2()", etc...

但是当点击它们时，它们不起作用，并且控制台抛出这个错误：

Error: [$parse:syntax] Syntax Error: Token '{' is an unexpected token at column 11 of the expression [myFunction{{$index}}()] starting at [{{$index}}()]

知道如何完成这项工作，或者是否有更好的方法？
提前致谢

Answer 1

不要在 AngularJS 表达式中使用插值 ({{ }})。而是使用属性访问器：

<div class="dropdown-menu status-menu" aria-labelledby="dropdownMenuButton">
   <span class="dropdown-item active" ng-click="allItems()">All Items</span>
   <span ng-repeat="x in itemsArray" class="dropdown-item"
         ̶n̶g̶-̶c̶l̶i̶c̶k̶=̶"̶m̶y̶F̶u̶n̶c̶t̶i̶o̶n̶{̶{̶$̶i̶n̶d̶e̶x̶}̶}̶(̶)̶"̶
         ng-click="this['myFunction'+$index]()">
     {{x.name}}
   </span>
</div>

对于 AngularJS 表达式，this 上下文绑定到 $scope。

有关详细信息，请参阅

AngularJS Developer Guide - Expression context

Answer 2

你也可以通过 index 在一个 function:

中解决

HTML:

<div class="dropdown-menu status-menu" aria-labelledby="dropdownMenuButton">
   <span class="dropdown-item active" ng-click="allItems()">All Items</span>
      <span ng-repeat="x in itemsArray" class="dropdown-item" 
            ng-click="myFunction($index)">{{x.name}}</span>
</div>

控制器：

$scope.myFunction(index){
   switch(index){
     case 0: 
        ///function 0
     break;
     case 1:
        ///function 1
     break;
     //etc
   }
}

是否可以在 AngularJS 的 ng-click 中添加 ng-repeat $index 值？

Is it possible to add an ng-repeat $index value inside an ng-click with AngularJS?

javascript

angularjs

angularjs-ng-click