如何获取带有选择/取消选择所有功能和不确定值的angular.js复选框？

一尘不染

如何获取带有选择/取消选择所有功能和不确定值的angular.js复选框？

angularjs

我正在寻找完全像这些的东西（带有“父母”的三态复选框）。但是使用该解决方案并不好用，因为我现在不依赖jQuery，因此我需要调用$
scope。$ apply来使模型识别自动（未选中）的复选框单击的jQuery。

这是angular.js的错误，要求执行ng-
indeterminate-value。但这仍然不能使我同步到所有孩子，这是我认为不应该成为我的控制器的一部分的事情。

我正在寻找的是这样的：

A“NG-儿童模型”指令用的语法：<input type="checkbox" ng-children-model="child.isSelected for child in listelements">。布尔值列表将被计算，如果选择0->复选框为false。如果全部选中->复选框为true。否则->复选框不确定。
在我的控制器中，我将有以下内容： $scope.listelements = [{isSelected: true, desc: "Donkey"},{isSelected: false, desc: "Horse"}]
复选框将照常使用<tr ng-repeat="elem in listelements"><td><input type="checkbox" ng-model="elem.isSelected"></td><td>{{elem.desc}}</td></tr>。
据我了解，浏览器将确定单击不确定的复选框进入哪种状态。

阅读 224

2020-07-04

共1个答案

一尘不染

由于您需要一种新的类型/类型的组件，因此这对于自定义指令来说是一个很好的案例。
由于父/主/三态复选框和各个双状态复选框需要相互交互，因此我建议使用带有其自己的控制器的单个指令来处理逻辑。

<tri-state-checkbox checkboxes="listelements"></tri-state-checkbox>

指示：

app.directive('triStateCheckbox', function() {
  return {
    replace: true,
    restrict: 'E',
    scope: { checkboxes: '=' },
    template: '<div><input type="checkbox" ng-model="master" ng-change="masterChange()">'
      + '<div ng-repeat="cb in checkboxes">'
      + '<input type="checkbox" ng-model="cb.isSelected" ng-change="cbChange()">{{cb.desc}}'
      + '</div>'
      + '</div>',
    controller: function($scope, $element) {
      $scope.masterChange = function() {
        if($scope.master) {
          angular.forEach($scope.checkboxes, function(cb, index){
            cb.isSelected = true;
          });
        } else {
          angular.forEach($scope.checkboxes, function(cb, index){
            cb.isSelected = false;
          });
        }
      };
      var masterCb = $element.children()[0];
      $scope.cbChange = function() {
        var allSet = true, allClear = true;
        angular.forEach($scope.checkboxes, function(cb, index){
          if(cb.isSelected) {
            allClear = false;
          } else {
            allSet = false;
          }
        });
        if(allSet)        { 
          $scope.master = true; 
          masterCb.indeterminate = false;
        }
        else if(allClear) { 
          $scope.master = false; 
          masterCb.indeterminate = false;
        }
        else { 
          $scope.master = false;
          masterCb.indeterminate = true;
        }
      };
      $scope.cbChange();  // initialize
    },
  };
});

更改模板以满足您的需要，或者将外部模板与templateUrl一起使用。

该指令假定checkboxes数组包含具有isSelected属性和desc属性的对象。

柱塞。

更新
：如果您只希望该指令仅呈现三态复选框，因此单个复选框位于HTML中（例如@Piran的解决方案），这是该方法的另一个更小巧的变体。对于这个笨拙的人，HTML将是：

<tri-state-checkbox checkboxes="listelements" class="select-all-cb">
</tri-state-checkbox>select all
<div ng-repeat="item in listelements">
   <input type="checkbox" ng-model="item.isSelected"> {{item.desc}}
</div>

2020-07-04