Angular 在 ng-repeat 中切换 md-button 的方式

Question

我在 ng-repeat 中有大约 10 个按钮，它们基本上像一个开关一样操作以获取多个数据，每个按钮都必须将一个值传递给控制器，并且在控制器中第一次单击时将该值推送到一个数组并删除它接下来的值（切换动作）。

我的html代码段

<md-button id="{{choice.id}}btn{{ambutton}}" ng-repeat="ambutton in ambuttons" ng-click="getTime(choice,ambutton);" class="md-fab  md-primary" ng-class="{'active md-warn': variable,'disable md-primary': !variable}">{{ambutton}}</md-button>

控制器函数

 $scope.ambutton=[1,2,3,4,5,6,7,8,9,10]
    $scope.getTime = function (choice,ambutton) {
            $scope.variable = !$scope.variable;
            if($scope.variable){
                //save the value to an array;
            }
            else{
              //remove the value from array
             }
        };

面临的问题是当我单击一个按钮时所有按钮都变为活动状态，我尝试为每个按钮添加不同的变量，如 variable0,variable1,variable2...（通过添加 variable{{ambutton}}) 并在控制器中使用 if-elseif 它工作正常，但我需要一个更好的解决方案，每个按钮相关的 id 有什么可能吗？

Answer 1

看看这个 http://jsfiddle.net/n2p1ocqz/7/

你可以把variables当做一个数组，用索引操作，不管选不选，比如

   $scope.ambuttons=[1,2,3,4,5,6,7,8,9,10]
   $scope.variables=[];
    $scope.getTime = function (choice, ambutton, index) {
            $scope.variables[index] = !$scope.variables[index];
            if($scope.variable[index]){
                //save the value to an array;
            }
            else{
              //remove the value from array
             }
        };

你的部分喜欢

<md-button  ng-repeat="ambutton in ambuttons track by $index" ng-click="getTime(choice, ambutton, $index);" class="md-fab  md-primary" ng-class="{'active md-warn': variable,'disable md-primary': !variables[$index]}">{{ambutton}}</md-button>

Angular 在 ng-repeat 中切换 md-button 的方式

Angular way of toggle md-button inside ng-repeat

angularjs

angularjs-material