Question

我遇到一个问题，如果我需要启用保存按钮，如果选择了至少一个在ng-repeat内的复选框。当我第一次点击它时效果很好，但是对多个复选框点击有用。

以下是工作人员：

我使用ng-change来获取所选条件..

 $scope.getSelectedState = () => {
                var selectedCount = new Array();

                for (var i in $scope.selected) {
                    selectedCount.push($scope.selected[i]);
                }
                var allTrue = selectedCount.every(function (k) { return k });
                if (allTrue) {
                    $scope.isSelected = false;
                } else {
                    $scope.isSelected = true;
                }
            }

Answer 1

这个怎么样：

$scope.getSelectedState = () => {
    var selectedCount = new Array();

    for (var i in $scope.selected) {
        selectedCount.push($scope.selected[i]);
    }

    $scope.isSelected = selectedCount.indexOf(true) !== -1 ? false : true;
}

使用复选框值填充数组，然后检查该数组是否包含true的值indexOf

Answer 2

只需更改您的getSelectedState即可。见PLUNKER DEMO

像：

 $scope.getSelectedState = function() {
     $scope.isSelected = true;
     angular.forEach($scope.selected, function(key, val) {   
     if(key) {
       $scope.isSelected = false;
     }
   });
 };

根据您的plunker演示，您应该在ng-repeat代码中使用<tr>代替<body>代码。

Answer 3

这是我的建议。每当有任何检查项目时，它将变量＆＃34; isAnyTrue = true＆＃34;。

＆＃13;

 $scope.getSelectedState = () => {
                var selectedCount = new Array();
               
         
                var isAnyTrue  = false;
                for (var i in $scope.selected) {
                    if ($scope.selected[i] === true){
                     isAnyTrue = true;
                    }
                    selectedCount.push($scope.selected[i]);
                }
                var allTrue = selectedCount.every(function (k) { return k });
                 $scope.isSelected = !isAnyTrue;
                
            }

＆＃13;

Answer 4

这是您更新的app.js：

 var app = angular.module('plunker', []);

    app.controller('MainCtrl', function($scope) {
      $scope.name = 'World';
             $scope.selected = {};

                $scope.outputType = [
                    {
                        "id": 1,
                        "name": "Coal"
                    },
                    {
                        "id": 2,
                        "name": "Rom"
                    },
                    {
                        "id": 3,
                        "name": "Waste"
                    }
                ];
                $scope.months = ["JAN", "FEB"];
                $scope.values = [];

                $scope.isSelected = true;

                $scope.getSelectedState = (id) => {
                     var selectedCount = 0;

                    for(var key in $scope.selected){
                        if($scope.selected[key]){
                          selectedCount++;
                        }

                    }

                    if(selectedCount!=0){
                       $scope.isSelected = false;
                    }else{
                       $scope.isSelected = true;
                    }

                }



    });

Answer 5

这样做：

$scope.isSelected = false;
        $scope.getSelectedState = () => {
            var atleastOneSelected = false;
            for (var i in $scope.selected) {
              atleastOneSelected = atleastOneSelected || $scope.selected[i];
            }
            $scope.isSelected = atleastOneSelected;
        }

并在html部分有以下内容：

<button type="button" ng-disabled="!isSelected" ng-click="save()">Save</button>

Answer 6

我对这个问题有点迟了，我看到每个人都已经给了你很多很棒的建议。

我发现了一些你不喜欢的东西，它们不涉及任何控制器（Javascript）代码。

以下是复选框的HTML：

<label class="checkbox" >
                    <input type="checkbox" class="form-control"
                           ng-model="selected[item.id]" ng-init="state = -1" ng-click="state = state * -1;$parent.validFields = $parent.validFields + state;" /><i></i>
                </label>

按钮：

 <button type="button" ng-disabled="validFields <= 0" ng-click="save()">Save</button>

基本上一般的想法是这样的：你有一个从0开始的“validFields”计数器（=没有激活字段）。如果此值大于0，则显示该按钮。

每个复选框都有一个“状态”，即1或-1。每次单击复选框时，它会将其状态添加到计数器，指示它是ON还是OFF，并切换其状态。下次单击时，“取消”添加到验证的先前值。

在这里工作Plunker链接：PLUNKER DEMO

快乐的编码！

Answer 7

调用ng-更改功能，（复选框在ng-repeat中）：

<input type="checkbox" name="selected" ng-model="library.isSelected" ng-change="auditCtrl.showButton()"/>

<button class="btn btn-primary" type="button" ng-click="auditCtrl.sendApproval()" ng-disabled="!auditCtrl.showSend">Send</button>

的.js

auditCtrl.showButton = function()
{   
    var arrayCheck = [];
    for(var k = 0; k < auditCtrl.libraries.length; k++)
    {
        if(auditCtrl.libraries[k].isSelected == true)
        {
             arrayCheck.push(auditCtrl.libraries[k]);
        }
    }
    if(arrayCheck.length > 0)
    {
        auditCtrl.showSend = true;
    }
    else
    {
        auditCtrl.showSend = false;
    }
}

如果在ng-repeat

7 个答案: