1

我面临一个问题，如果在 ng-repeat 中至少选择了一个复选框，我需要启用保存按钮。当我第一次单击时，它运行良好，但对于多个复选框单击不起作用。

下面是工作的plunker：

禁用保存按钮

我正在使用 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;
                }
            }
4

7 回答 7

2

这是您更新的 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;
                    }

                }



    });
于 2016-02-04T13:57:22.143 回答
2

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

我发现了一些你可能喜欢的不同的东西，它不涉及任何控制器（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。每次单击复选框时，它都会将其状态添加到计数器中，指示它是打开还是关闭，并切换其状态。下次单击时，您将“取消”添加到验证中的先前值。

工作 Plunker 链接在这里：PLUNKER DEMO

快乐编码！

于 2016-02-04T14:47:47.423 回答
2

只需更改您的getSelectedState. 见柱塞演示

喜欢：

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

根据您的 plunker 演示，您应该使用ng-repeatin<tr>标签而不是标签。<body>

于 2016-02-04T13:52:06.453 回答
2

这是我的建议。每当有任何选中的项目时，它都会使变量“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;
                
            }

于 2016-02-04T13:55:50.393 回答
2

这个怎么样：

$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

于 2016-02-04T13:50:32.877 回答
2

做这个：

$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>
于 2016-02-04T14:00:42.560 回答
0

调用 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;
    }
}
于 2016-09-01T09:14:07.720 回答