ng-repeat如何单独处理按钮元素

Question

到目前为止，我正在使用ng-repeat来填充表中的数据。我想要完成的是使用一个按钮并根据userId（cust.id）更改它的文本。我试图了解如何在重复方法中使用$ scope并将其与其他元素分开修改。

在下面的演示中，当我点击按钮（userid值= 1）时，我想更改特定的按钮文本而不是我的ng-repeat中的每个按钮

<button ng-click="perLineText(cust.id)">{{buttonText}}</button>

Live Demo

我试图找出如何处理ng-repeat中的特定元素。任何帮助非常感谢。

Answer 1

您只需使用控制器功能中的this代替$scope即可。

$scope.perLineText = function(customerId){
   if (customerId === 1) {
     this.buttonText = 'Stop';
   };

查看更新的小提琴http://jsfiddle.net/u5swjwv1/

单击回调this指向嵌套repeat元素的范围。如果使用$scope，则实际上是指父作用域对象。

同样看一下这个解释'this' vs $scope in AngularJS controllers

Answer 2

处理此问题的一个好方法是使用$index。只需在调用perLineText($index)函数时传递它，以便知道您所在的行。现在您可以使用数组中相应的索引对象（可能是$scope.customers[index]

）

Answer 3

你也可以使用ng-bind =“perLineText（cust.id）”而不是{{buttonText}}，这样ng-click就会出现问题，而perLineText会返回Start或Stop。