目標僅在角

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>