web-dev-qa-db-ja.com

すべての機能と不定の値を選択/選択解除してangle.jsチェックボックスを取得するにはどうすればよいですか？

これら （「親」の3状態チェックボックス）のようなものを探しています。しかし、現在jQueryに依存していないため、このソリューションを使用してもエレガントではありません。また、$ scope。$ applyを呼び出して、モデルに自動（未）チェックボックス付きjQueryがクリックされたことを認識させる必要があります。

angular.jsのバグです ng-indeterminate-valueの実装を要求します。しかし、それでもまだすべての子に同期が提供されるわけではありません。これは、コントローラーの一部であるとは思わないことです。

私が探しているのは次のようなものです：

  • <input type="checkbox" ng-children-model="child.isSelected for child in listelements">のような構文を持つ「ng-children-model」ディレクティブ。ブール値のリストが計算され、0が選択された場合->チェックボックスがfalseになります。すべて選択->チェックボックスが真の場合。その他->チェックボックスは不定。
  • 私のコントローラーには、次のようなものがあります：$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>を使用して通常どおり作成されます。
  • 私が理解しているように、ブラウザはクリックされた不確定チェックボックスがどの状態になるかを決定します。
javascripthtml5checkboxangularjstri-state-logic
27
Janus Troelsen

新しいタイプ/種類のコンポーネントが必要なので、これはカスタムディレクティブの良い例のように聞こえます。
親/マスター/トライステートチェックボックスと個々のデュアルステートチェックボックスは相互にやり取りする必要があるため、ロジックを処理するための独自のコントローラーを備えた単一のディレクティブをお勧めします。

<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で外部テンプレートを使用します。

このディレクティブは、チェックボックス配列にisSelectedプロパティとdescプロパティを持つオブジェクトが含まれていることを前提としています。

Plunker 。

Update：ディレクティブにトライステートチェックボックスのみを表示させる場合、個々のチェックボックスは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>
20
Mark Rajcok

あなたが提供するサンプルソリューションは、コントローラーに多くのコードを入れていると思います。コントローラーは実際にはリストのみを心配する必要があり、HTML /ディレクティブは表示を処理する必要があります（「すべて選択」チェックボックスの表示を含む）。また、状態の変更はすべて、関数の作成によるものではなく、モデルを介したものです。

Plunkerでソリューションをまとめました： http://plnkr.co/edit/gSeQL6XPaMsNSnlXwgHt?p=preview

これで、コントローラーはリストをセットアップするだけです。

_app.controller('MainCtrl', function($scope) {
    $scope.list = [{
        isSelected: true,
        desc: "Donkey"
    }, {
        isSelected: false,
        desc: "Horse"
    }];
});
_

そして、ビューは単にそれらをレンダリングします：

_<div ng-repeat="elem in list">
  <input type="checkbox" ng-model="elem.isSelected" /> {{elem.desc}}
</div>
_

[すべて選択]チェックボックスについて、_checkbox-all_という新しいディレクティブを作成しました。

_  <input checkbox-all="list.isSelected" /> Select All
_

そして、それが使用に関する限り、これは願わくば単純です...新しいディレクティブを書くことは別として：

_app.directive('checkboxAll', function () {
  return function(scope, iElement, iAttrs) {
    var parts = iAttrs.checkboxAll.split('.');
    iElement.attr('type','checkbox');
    iElement.bind('change', function (evt) {
      scope.$apply(function () {
        var setValue = iElement.prop('checked');
        angular.forEach(scope.$eval(parts[0]), function (v) {
          v[parts[1]] = setValue;
        });
      });
    });
    scope.$watch(parts[0], function (newVal) {
      var hasTrue, hasFalse;
      angular.forEach(newVal, function (v) {
        if (v[parts[1]]) {
          hasTrue = true;
        } else {
          hasFalse = true;
        }
      });
      if (hasTrue && hasFalse) {
        iElement.attr('checked', false);
        iElement.addClass('greyed');
      } else {
        iElement.attr('checked', hasTrue);
        iElement.removeClass('greyed');
      }
    }, true);
  };
});
_

parts変数は_list.isSelected_を2つの部分に分けているので、listの値をスコープから取得できます。つまり、各オブジェクトのisSelectedプロパティです。

_type="checkbox"_プロパティをinput要素に追加し、ブラウザの実際のチェックボックスにします。これは、ユーザーがクリック、タブ移動などができることを意味します。

チェックボックスはキーボード経由など、さまざまな方法で変更できるため、onchangeではなくonclickイベントにバインドします。 onchangeイベントはscope.$apply()内で実行され、モデルの変更が最後に確実に消化されるようにします。

最後に、チェックボックスへの変更の入力モデルである_$watch_（最後のtrueにより、複雑なオブジェクトを見ることができます）。つまり、ユーザーがチェックボックスを変更した場合、またはその他の理由でチェックボックスが変更された場合、[すべて選択]チェックボックスは常に同期されます。これは、多くのng-clickハンドラーを記述するよりもはるかに優れています。

チェックボックスがオンとオフの両方になっている場合、マスターチェックボックスをオフに設定し、スタイルを「グレー」に追加します（_style.css_を参照）。そのCSSスタイルは基本的に不透明度を30％に設定するため、チェックボックスは灰色で表示されますが、クリック可能のままです。また、タブで移動し、スペースバーを使用して値を変更することもできます。

FirefoxでChromeとSafariでテストしましたが、手元にIEがありません。うまくいけばうまくいきます。

20
Piran

洗練されたバージョン Piranのソリューションです。 .prop()の代わりに .attr() を使用すると、checkedの問題が修正されます。

使用法：

<div ng-repeat="elem in list">
    <input type="checkbox" ng-model="elem.isSelected" /> {{elem.desc}}
</div>
<ui-select-all items="list" prop="isSelected"></ui-select-all> Select all
4
wldaunfr

何らかの種類のDOM操作を行う必要がある場合、または多くのDOM操作動作を「再利用可能な」コンポーネントに抽象化する場合にのみ、ディレクティブを作成する必要があると思います。

これはあなたが試みていたのと同じことを達成するソリューションですが、これはコントローラーのロジックのみを実行します...コントローラーを無駄にしたくない場合は、このロジックをすべてサービスにプッシュすることができます... A複数の場所でこれを再利用したい場合は、サービスもこれを行うのに適した場所です。

http://plnkr.co/edit/hNTeZ8Tuht3T9NuY7HRi?p=preview

コントローラーにはDOM操作がないことに注意してください。 Angularで提供される一連のディレクティブを使用して、必要な効果を達成しています。新しいディレクティブは必要ありません。ロジックを抽象化するためにディレクティブを使用すべきではないと本当に思います。

お役に立てれば..

2
ganaraj

Ng-modelがブールモデル（Y/N、 '0'/'1'など）に割り当てられていると想定できない場合、および/または独自のマークアップを使用したい場合は、ngModel機能を活用して、私見では、HTML構造に関する前提はありません。

例： http://plnkr.co/edit/mZQBizF72pxp4BvmNjmj?p=preview

サンプル使用法：

  <fieldset indeterminate-group>
    <legend>Checkbox Group</legend>
    <input type="checkbox" name="c0" indeterminate-cue> Todos <br>
    <input type="checkbox" name="c1" ng-model="data.c1" ng-true-value="'Y'" ng-false-value="'F'" indeterminate-item> Item 1 <br>
    <input type="checkbox" name="c2" ng-model="data.c2" ng-true-value="'Y'" ng-false-value="'F'" indeterminate-item> Item 2 <br>
    <input type="checkbox" name="c3" ng-model="data.c3" ng-true-value="'Y'" ng-false-value="'F'" indeterminate-item> Item 3 <br>
  </fieldset>

ディレクティブ（主要部分）：

angular.module('app', [])
  .directive('indeterminateGroup', function() {
    function IndeterminateGroupController() {
      this.items = [];
      this.cueElement = null;
    }
    ...
    function setAllValues(value) {
      if (this.inChangeEvent) return;

      this.inChangeEvent = true;
      try {
        this.items.forEach(function(item) {
          item.$setViewValue(value);
          item.$render();
        });
      } finally {
        this.inChangeEvent = false;
      }
    }

    return {
      restrict: "A",
      controller: IndeterminateGroupController,
      link: function(scope, element, attrs, ctrl) {
        ctrl.inputChanged = function() {
          var anyChecked = false;
          var anyUnchecked = false;
          this.items.forEach(function(item) {
            var value = item.$viewValue;
            if (value === true) {
              anyChecked = true;
            } else if (value === false) {
              anyUnchecked = true;
            }
          });

          if (this.cueElement) {
            this.cueElement.prop('indeterminate', anyChecked && anyUnchecked);
            this.cueElement.prop('checked', anyChecked && !anyUnchecked);
          }
        };
      }
    };
  })
  .directive('indeterminateCue', function() {
    return {
      restrict: "A",
      require: '^^indeterminateGroup',
      link: function(scope, element, attrs, indeterminateGroup) {
        indeterminateGroup.addCueElement(element);
        var inChangeEvent = false;
        element.on('change', function(event) {
          if (event.target.checked) {
            indeterminateGroup.checkAll();
          } else {
            indeterminateGroup.uncheckAll();
          }
        });
      }
    };
  })
  .directive('indeterminateItem', function() {
    return {
      restrict: "A",
      require: ['^^indeterminateGroup', 'ngModel'],
      link: function(scope, element, attrs, ctrls) {
        var indeterminateGroup = ctrls[0];
        var ngModel = ctrls[1];
        indeterminateGroup.addItem(ngModel);
        ngModel.$viewChangeListeners.Push(function() {
          indeterminateGroup.inputChanged();
        });
      }
    };
  });

モデル：

// Bring your own model

TODO：

  • メインディレクティブコントローラー内のitem。$ render（）を取り除きます。
  • ディレクティブにもっと良い名前を付けます。
  • このディレクティブを複数のテーブル列で使いやすくします。
1
André Werlang

Plnker を使用して、リソースを消費するForEachやその他の複雑なものを使用せずに、少し優れたコードに書き換えました。

var app = angular.module('angularjs-starter', []);

app.controller('MainCtrl', function($scope) {
  $scope.listelements = [{
    isSelected: true,
    desc: "Donkey"
  }, {
    isSelected: false,
    desc: "Horse"
  }];
});

app.directive('triStateCheckbox', function() {
  return {
    replace: true,
    restrict: 'E',
    scope: {
      checkboxes: '='
    },
    template: '<input type="checkbox" ng-model="master" ng-change="masterChange()">',
    controller: function($scope, $element) {
      $scope.masterChange = function() {
        for(i=0;i<$scope.checkboxes.length; i++)
          $scope.checkboxes[i].isSelected=$scope.master;
      };
      $scope.$watch('checkboxes', function() {
        var set=0;
        for (i=0;i<$scope.checkboxes.length;i++)
          set += $scope.checkboxes[i].isSelected?1:0;
        $element.prop('indeterminate', false);
        $scope.master = (set === 0) ? false : true;
        if (set > 0 && set < i) {
          $scope.master = false;
          $element.prop('indeterminate', true);
        }
      }, true);
    }
  };
});
0
Fyodor Dostoyevsky

angular= javascriptと組み合わせることで解決できると思います。

<div>

<input type="checkbox" id="select-all" name="selectAll" value="" ng-click="checkAll($event)" />

<div >
  <input type="checkbox"  name="childCheckbox" value=""  />

  <input type="checkbox"  name="childCheckbox" value=""  />

  <input type="checkbox"  name="childCheckbox" value=""  />

  <input type="checkbox"  name="childCheckbox" value=""  />

  <input type="checkbox"  name="childCheckbox" value=""  />

  <input type="checkbox"  name="childCheckbox" value=""  />
 </div>

</div>

checkAll（）では、次のロジックがジョブを実行します

  $scope.checkAll = function (source) {
   checkboxes = document.getElementsByName('childCheckbox');                                                 
   for (var i = 0, n = checkboxes.length; i < n; i++)   {
     checkboxes[i].checked = source.originalEvent.srcElement.checked;
   }
0
Rishul Matta

Plunker

"use strict";

var module = angular.module("myapp", []);

function Ctrl($scope) {
    var element = $("#select_all");
    $scope.$watch("$scope.isgreyed", $scope.fun = function() {
        element.prop("indeterminate", $scope.isgreyed);
    });
    $scope.list = [{
        isSelected: true,
        desc: "Donkey"
    }, {
        isSelected: false,
        desc: "Horse"
    }]
    $scope.isgreyed = true;
    $scope.master = false;
    $scope.onmasterclick = function() {
        $scope.list.map(function(v) {
            v.isSelected = $scope.master
        })
    }

    $scope.oncheckboxclick = function() {     
        if ($('.select_one:checked').length === 0) {
            $scope.isgreyed = false;
            $scope.master = false;     
        } else if ($('.select_one:not(:checked)').length === 0) {
            $scope.isgreyed = false;
            $scope.master = true;     
        } else {
            $scope.isgreyed = true;     
        }
        $scope.fun();
    }      
}

HTML：

<div ng-controller="Ctrl">
<table>
<tr>
  <td>
     <input type="checkbox" id="select_all" ng-model="master" ng-click="onmasterclick()">
  </td>
</tr>
<tr ng-repeat="elem in list">
  <td>
    <input ng-click="oncheckboxclick(elem)" class="select_one" type="checkbox" ng-model="elem.isSelected">
  </td>
  <td>{{elem.desc}}</td>
</tr>
</table>
</div>

はい、それはいです。

0
Janus Troelsen