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

Question

有一个简单的方法来放置一个网页上的一个三态复选框，将其绑定到一个布尔模型，以便后者可以采取true，false或null值？

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

Answer 1

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