すべての選択/選択解除機能と不確定な値を持つ angular.js チェックボックスを取得するにはどうすればよいですか? 質問する

Question

あなたが提示したサンプルソリューションでは、コントローラにコードが多すぎると思います。コントローラはリストのみに注意を払い、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はを 2 つの部分に分割するので、スコープからのlist.isSelected値と各オブジェクトのプロパティを取得できます。listisSelected

入力要素にプロパティを追加してtype="checkbox"、ブラウザの実際のチェックボックスにします。つまり、ユーザーはクリックしたり、タブで移動したりすることができます。

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

最後に、$watchチェックボックスの変更に対する入力モデルを作成します (これにより、true複雑なオブジェクトを監視できます)。つまり、チェックボックスがユーザーによって変更された場合、または他の何らかの理由で変更された場合、[すべて選択] チェックボックスは常に同期された状態に保たれます。これは、多数の ng-click ハンドラーを作成するよりもはるかに優れています。

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

Firefox、Chrome、Safari でテストしましたが、IE は手元にありません。これでうまくいくといいのですが。

Answer 1