代码之家  ›  专栏  ›  技术社区  ›  Learning-Overthinker-Confused

全选复选框在我没有任何记录时默认选中

  •  0
  • Learning-Overthinker-Confused  · 技术社区  · 7 年前

    当没有记录时,我检查了“全选”按钮,出现了问题。

    以下是我的代码:

    <input type="checkbox" ng-model="selectAll" ng-model-options="{getterSetter: true}"/>
    
     var getAllSelected= function () {
            var selectedItems = $scope.items.filter(function (item) {
                return item.selected;
            });
            return selectedItems.length === $scope.items.length;
        }
    
        var setAllSelected = function (value) {
            angular.forEach($scope.items, function (item) {
                item.selected = value;
            });
        }
    
        $scope.selectAll = function (value) {
            if (value !== undefined) {
                return setAllSelected(value);
            } else {
                return getAllSelected();
            }
        }
    

    所以问题是,当我的数据库中没有记录时,条件变为现实 $scope.items

    return selectedItems.length === $scope.items.length;
    
    2 回复  |  直到 7 年前
        1
  •  1
  •   Mayur Agarwal    7 年前

    我用以下代码片段尝试了您的代码:

    var app = angular.module('app', [])
    
    .controller('ctrl', ['$scope', function($scope) {
    
    
    $scope.value = false;
    $scope.items = [{},{}];
    
     var getAllSelected= function () {
            var selectedItems = $scope.items.filter(function (item) {
                return item.selected;
            });
            return $scope.items.length != 0 && selectedItems.length === $scope.items.length;
        }
    
        var setAllSelected = function (value) {
          console.log(value);
            angular.forEach($scope.items, function (item) {
                item.selected = value;
            });
        }
    
        $scope.selectAll = function (value) {
          console.log(value);
            if (value !== undefined) {
                return setAllSelected(value);
            } else {
                return getAllSelected();
            }
        }
      }]);
    

      <input type="checkbox" ng-model="selectAll" ng-model-options="{getterSetter: true}"/>
    

    您可以在此处查看: https://plnkr.co/edit/oUjNQGI363SJPMeaWA6A?p=preview

        2
  •  1
  •   Grady Phillips    7 年前

    非常简单的修复,只需添加一个条件以确保长度不为零。

    return $scope.items.length != 0 && selectedItems.length === $scope.items.length;