【问题标题】:Angular way of toggle md-button inside ng-repeat在 ng-repeat 中切换 md 按钮的角度方式
【发布时间】:2017-12-29 17:10:08
【问题描述】:

我在 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 有什么可能吗?

【问题讨论】:

    标签: angularjs angularjs-material


    【解决方案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>
    

    【讨论】:

    • 这很好,但在我的用例中,我可能不得不再次重复此按钮集合以获取其他选择的输入,例如 jsfiddle.net/rahulaunni/fv6Lea7j/2,我该如何解决这个问题
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2014-08-10
    • 1970-01-01
    • 2016-07-27
    • 1970-01-01
    • 2015-08-24
    • 2016-08-14
    • 2017-04-04
    相关资源
    最近更新 更多