12

単一のトライステート チェックボックスを Web ページに配置し、それをブール モデルにバインドして、後者がtrue,falseまたはnull値を取ることができるようにする簡単な方法はありますか?

これまでに見つけた最も近い解決策はhttp://jsfiddle.net/HB7LU/454/ですが、初期ビュー状態を設定するときに問題があります (最初のレンダリング中にモデル値を取得する方法がないため)。他の提案は、複数の子チェックボックスを処理し、それらを監視することで問題を解決します。

4

5 に答える 5

10

http://jsfiddle.net/xJhEG/商用プロジェクトで作りました。トライステートは true、false、null (「不明」ではない)

.directive('indeterminate', [function() {
    return {
      require: '?ngModel',
      link: function(scope, el, attrs, ctrl) {
        var truthy = true;
        var falsy = false;
        var nully = null;
        ctrl.$formatters = [];
        ctrl.$parsers = [];
        ctrl.$render = function() {
          var d = ctrl.$viewValue;
          el.data('checked', d);
          switch(d){
          case truthy:
            el.prop('indeterminate', false);
            el.prop('checked', true);
            break;
          case falsy:
            el.prop('indeterminate', false);
            el.prop('checked', false);
            break;
          default:
            el.prop('indeterminate', true);
          }
        };
        el.bind('click', function() {
          var d;
          switch(el.data('checked')){
          case falsy:
            d = truthy;
            break;
          case truthy:
            d = nully;
            break;
          default:
            d = falsy;
          }
          ctrl.$setViewValue(d);
          scope.$apply(ctrl.$render);
        });
      }
    };
  }])
于 2014-01-25T06:37:33.607 に答える
6

TruongSinhから始まり、変化する私の Fiddle です。

http://jsfiddle.net/xJhEG/25/

それなし

var truthy = true;
var falsy = false;
var nully = null;
于 2015-04-28T09:05:29.587 に答える
1

使用できるディレクティブを作成しました。 3 段階のチェックボックス GitHub の AngularJS ディレクティブ

どのように構築されたかという投稿もあります: Angular Directive の作成 "Three-state チェックボックス"

DEMOを試すことができます

ディレクティブは次のようになります。

angular.module("threeStateCheckbox", [])
    .directive("threeStateCheckbox", ['$compile', function($compile){
        return {
            restrict: "A",
            transclude: true,
            require: 'ngModel',
            link: function(scope, element, attrs, ngModel){
                var states = [true, false, null];
                var classNames = ["checked", "unchecked", "clear"];
                scope.click = function(){
                    var st;
                    states.map(function(val, i){
                        if(ngModel.$modelValue === val){
                            st = states[(i+1)%3];
                        }
                    });
                    ngModel.$setViewValue(st);
                    ngModel.$render();
                };
                scope.tscClassName = function(){
                    var className;
                    states.map(function(val, i){
                        if(ngModel.$modelValue=== val){
                            className = classNames[i];
                        }
                    });
                    return className;
                };
                element.attr("class", "tri-sta-che ");
                element.attr("ng-click", "click()");
                element.attr("ng-class", "tscClassName()");
                element.removeAttr("three-state-checkbox");
                $compile(element)(scope);
            }
        };
    }]);
于 2016-06-21T15:29:09.640 に答える