javascript - 在angularjs中实现单个三态复选框的最佳方法是什么？

是否有一种简单的方法将单个三态复选框放置在网页上并将其绑定(bind)到 bool 模型，以便后者可以采用true，false或null值？

到目前为止，我找到的最接近的解决方案是http://jsfiddle.net/HB7LU/454/，但是在设置初始 View 状态时存在缺陷(因为在第一次渲染期间无法获取模型值)。任何其他建议都涉及多个子复选框，并通过监视它们来解决问题。

最佳答案

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);
        });
      }
    };
  }])

关于javascript - 在angularjs中实现单个三态复选框的最佳方法是什么？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21347384/