我怎样才能得到angular.js复选框以选择/取消选择所有功能和不确定的价值观？ [英] How can I get angular.js checkboxes with select/unselect all functionality and indeterminate values?

问题描述

我要寻找的东西完全一样这些（三态复选框以父母）。但使用的解决方案不会是优雅的，因为我不依赖于jQuery的，现在，我需要调用$范围。$申请获取模型识别自动（UN）检查checkboxed jQuery的点击。

I am looking for something exactly like these (tri-state checkboxes with "parents"). But using that solution wouldn't be elegant, as I do not depend on jQuery right now, and I would need to call $scope.$apply to get the model to recognize the automatically (un)checked checkboxed jQuery clicked.

下面是angular.js 请求实施NG-不确定值的错误。但是，仍然不会给我同步到所有的孩子，这是一件好事，我不认为应该是我的控制器的一部分。

Here's a bug for angular.js that requests ng-indeterminate-value implemented. But that still wouldn't give me the synchronization to all the children, which is something I don't think should be a part of my controller.

我所寻找的是这样的：

• ANG-儿童模型指令语法如下：＆LT;输入类型=复选框NG-儿童模型=child.isSelected为孩子listelements＆GT; 。布尔的名单将被计算，如果选择0 - >复选框假的。如果所有的选择 - >复选框真。否则 - >复选框不确定


• 在我的控制器，我想有这样的事情： $ scope.listelements = {[isSelected：真的，说明：驴}，{isSelected：假的，说明：马}]


• 的复选框会照常进行与＆LT; TR NG重复=ELEM在listelements＆GT;＆LT; TD＆GT;＆LT;输入类型=复选框NG模型=ELEM。 isSelected＆GT;＆LT; / TD＆GT;＆LT; TD＆GT; {{elem.desc}}＆LT; / TD＆GT;＆LT; / TR＆GT;


• 据我了解，浏览器将决定哪些说出一个不确定点击复选框进入。

• A "ng-children-model" directive with syntax like: <input type="checkbox" ng-children-model="child.isSelected for child in listelements">. The list of booleans would be computed, and if 0 selected -> checkbox false. If all selected -> checkbox true. Else -> checkbox indeterminate.
• In my controller, I would have something like this: $scope.listelements = [{isSelected: true, desc: "Donkey"},{isSelected: false, desc: "Horse"}]
• The checkboxes would be made as usual with <tr ng-repeat="elem in listelements"><td><input type="checkbox" ng-model="elem.isSelected"></td><td>{{elem.desc}}</td></tr>.
• As I understand it, the browser will determine which state a clicked indeterminate checkbox goes into.

推荐答案

既然你想要一个新的类型/类型的组件，这听起来像一个很好的案例自定义指令。
结果由于父/主/三态复选框和个人双状态复选框需要相互交流，我建议一个单一的指令，用自己的控制器，处理逻辑。

Since you want a new type/kind of component, this sounds like a good case for a custom directive.
Since the parent/master/tri-stated checkbox and the individual dual-state checkboxes need to interact with each other, I suggest a single directive, with its own controller, to handle the logic.

<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。

Change the template to suit your needs, or use an external template with templateUrl.

该指令假定复选框数组包含有一个 isSelected 属性和说明属性的对象。

The directive assumes that the checkboxes array contains objects that have an isSelected property and a desc property.

Plunker 。

更新：如果您preFER有指令只呈现三态复选框，因此单个复选框是在HTML（例如@皮兰的解决方案），这里的another plunker 获得的变异。对于这个plunker的HTML是：

Update: If you prefer to have the directive only render the tri-stated checkbox, hence the individual checkboxes are in the HTML (like @Piran's solution), here's another plunker variation for that. For this plunker, the HTML would be:

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

这篇关于我怎样才能得到angular.js复选框以选择/取消选择所有功能和不确定的价值观？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！