一尘不染

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

angularjs

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

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


阅读 217

收藏
2020-07-04

共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);
        });
      }
    };
  }])
2020-07-04