如果在ng-repeat中至少选中了一个复选框，则设置按钮的验证

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

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

Answer 2

只需更改您的getSelectedState 。 参见模拟演示

喜欢：

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

并且您应该根据插件示例将<tr>标记中的ng-repeat替换为<body>标记。

Answer 3

这是我的建议。 每当有任何选中的项目时，它将使变量“ isAnyTrue = true”。

  $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; } 

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，并切换其状态。 下次单击时，可以“取消”添加到验证中的先前值。

这里的工作柱塞链接： 柱塞演示

编码愉快！

Answer 7

调用ng- change函数，（复选框在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;
    }
}