Question

我从数据库获取div中的值并使用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;
}

我已经在我的css中定义了一个类isActive，并且在点击时将其应用/删除到按钮。有5个结果，因此divs和5 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 : name.isActive }"
                ng-click="name.isActive = !name.isActive">me</button>
    </div>
</div>

希望这会有所帮助。

Answer 2

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

一种方法是将名称或任何唯一标识按钮的内容传递给您的函数：

<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 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>

在Angular中仅定位1个按钮

3 个答案: