Question

我有一个全选复选框，我希望能够选择所有其他复选框。在我的代码中，如果我选中全选复选框，则会选中所有其他复选框，但我以后无法解决所有复选框。取消选中全选复选框，再次选中其他复选框。我的代码出了什么问题？

JSP

<input type="checkbox" ng-model="selectedAll" ng-click="checkAll()">ALL CHECK

<div class="floatitem" ng-repeat="assign in assignModel">
<input type="checkbox" ng-model="assign.assignYn" ng-true-value="'Y'" ng-false-value="'N'" ng-checked="selectedAll">{{assign.roomNum}}

控制器

$scope.checkAll = function () {
     if ($scope.selectedAll) {
         $scope.selectedAll = "Y";
     } else {
         $scope.selectedAll = "N";
     }
     angular.forEach($scope.assignModel, function (assign) {
         console.log(assign.assignYn)
         assign.assignYn = $scope.selectedAll;
     });

 };

默认情况下，assignYn的值设置为N.选中后，必须将其转换为＆＃34; Y＆＃34;，如果选中ALL复选框，则还必须将其转换为assignYn＆＃34; Y＆＃34;

Answer 1

您正在检查selectedAll为true / false，您应该将其检查为Y / N而不是

$scope.checkAll = function () {
     if ($scope.selectedAll==="N") {
         $scope.selectedAll = "Y";
     } else {
         $scope.selectedAll = "N";
     }
     angular.forEach($scope.assignModel, function (assign) {
         console.log(assign.assignYn)
         assign.assignYn = $scope.selectedAll;
     });

 };

Answer 2

您还需要在SelectedAll复选框上将true值和false值设置为Y / N，就像ng-repeat中的复选框一样。

此外，您不能在selectedAll复选框上使用ng-checked属性和ng-model属性。通过设置ng-model属性，您已经将checked属性映射到selectedAll变量。在这里查看doco：https://docs.angularjs.org/api/ng/directive/ngChecked

HTML，在selectedAll复选框上设置了true值和false值，并删除了ng-checked属性。

<div ng-controller="checkAllCtrl">
    <input type="checkbox" ng-model="selectedAll" ng-true-value="'Y'" ng false-value="'N'" ng-click="checkAll()">ALL CHECK

<div class="floatitem" ng-repeat="assign in assignModel">
    <input type="checkbox" ng-model="assign.assignYn" ng-true-value="'Y'" ng-false-value="'N'">{{assign.roomNum}}

</div>

的Javascript。请注意我是如何在checkAll函数中删除$ scope.selectedAll的赋值的。 ng-model为我们解决了这个问题。

angular.module('checkAllApp', []).controller('checkAllCtrl', ['$scope', 
function ($scope) {
    $scope.assignModel = [
    { assignYn: 'N', roomNum: 1 },
    { assignYn: 'N', roomNum: 2 },
    { assignYn: 'N', roomNum: 3 },
    { assignYn: 'N', roomNum: 4 },
    { assignYn: 'N', roomNum: 5 },
  ];

  $scope.selectedAll = 'N';

  $scope.checkAll = function () {
      angular.forEach($scope.assignModel, function (assign) {
          console.log(assign.assignYn)
          assign.assignYn = $scope.selectedAll;
      });
   }
}]);

angular.bootstrap(document, ['checkAllApp']);

示例JSFiddle：https://jsfiddle.net/kjzxejyd/7/

Answer 3

尝试这样做有效......

angular.module('MyApp',['ngMaterial','ngRoute','ngMessages'])

.controller('AppCtrl', function($scope) {
  $scope.items = [1,2,3,4,5];
  $scope.selected = [1];
  $scope.toggle = function (item, list) {
    var idx = list.indexOf(item);
    if (idx > -1) {
      list.splice(idx, 1);
    }
    else {
      list.push(item);
    }
  };

  $scope.exists = function (item, list) {
    return list.indexOf(item) > -1;
  };

  $scope.isIndeterminate = function() {
    return ($scope.selected.length !== 0 &&
        $scope.selected.length !== $scope.items.length);
  };

  $scope.isChecked = function() {
    return $scope.selected.length === $scope.items.length;
  };

  $scope.toggleAll = function() {
    if ($scope.selected.length === $scope.items.length) {
      $scope.selected = [];
    } else if ($scope.selected.length === 0 || $scope.selected.length > 0) {
      $scope.selected = $scope.items.slice(0);
    }
  };
});

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.0-rc4/angular-material.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.0-rc4/angular-material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script>
</head>
<body ng-controller="AppCtrl" ng-app="MyApp">
<div class="md-padding demo checkboxdemoSelectAll">
  <div layout="row" layout-wrap="">
    <div flex="100" layout="column">
      <div>
          <div layout="row" layout-wrap="" flex="">
          <div flex-xs="" flex="50">
            <md-checkbox aria-label="Select All" ng-checked="isChecked()" md-indeterminate="isIndeterminate()" ng-click="toggleAll()">
              <span ng-if="isChecked()">Un-</span>Select All
            </md-checkbox>
          </div>
            <div class="demo-select-all-checkboxes" flex="100" ng-repeat="item in items">
              <md-checkbox ng-checked="exists(item, selected)" ng-click="toggle(item, selected)">
               {{ item }}
              </md-checkbox>
            </div>
          </div>
        
      </div>
    </div>
</div></div>
</body>
</html>

使用angularjs创建一个全选复选框

3 个答案: