目标仅在角

Question

即时得到的值在从DB一个div和显示1个按钮使用ng-repeat：

<div ng-controller = "myTest"> 
    <div ng-repeat="name in names"> 
     <h4>{{name.name}}</h4> 
      <button ng-class="{'active': isActive}" ng-click="test()" >me</button> 
    </div> 
</div> 

在我的控制器我有：

$scope.test= function(){ 
    $scope.isActive = !$scope.isActive; 
} 

我已经定义的类isActive在我的CSS，这是应用/删除点击按钮。有5个结果，因此创建了5个divs原因为ng-repeat和5 buttons（每个div分别为1）。问题是，每个按钮（全部5个）正在获得该类。我只想将该类应用/移除到单击的按钮上。我怎样才能做到这一点？

Answer 1

您需要跟踪每个按钮的状态。

的一种方式将是通过名称或任何唯一标识的按钮，你的函数：

<div ng-controller = "myTest"> 
    <div ng-repeat="name in names"> 
     <h4>{{name.name}}</h4> 
      <button ng-class="{'active': buttons[name].isActive}" ng-click="test(name)" >me</button> 
    </div> 
</div> 

$scope.buttons = {}; 

$scope.test= function(name){ 
    $scope.buttons[name].isActive = !$scope.buttons[name].isActive; 
} 

Answer 2

你可以尝试这样的事情：

<div ng-controller="myTest"> 
    <div ng-repeat="name in names"> 
     <h4>{{name.name}}</h4> 
     <button ng-class="{ active : name.isActive }" 
       ng-click="name.isActive = !name.isActive">me</button> 
    </div> 
</div> 

希望这会有所帮助。

Answer 3

我创建了一个plunk，它可以在不修改源数组的情况下回答此问题。

你的功能变得

vm.test = function(buttonIndex) { 
     //Clear the class if you press the same button again 
     if (vm.buttonIndex === buttonIndex) { 
     vm.buttonIndex = undefined; 
     } else { 
     vm.buttonIndex = buttonIndex; 
     } 

    }; 

而且你的HTML是

<div ng-repeat="name in main.names track by $index"> 
    <h4>{{name.name}}</h4> 
    <button ng-class="{'active': main.buttonIndex===$index}" ng-click="main.test($index)">me</button> 
    </div>