有一个简单的方法来放置一个网页上的一个三态复选框,将其绑定到一个布尔模型,以便后者可以采取true,false或null值?
true
false
null
到目前为止,我找到的最接近的解决方案是http://jsfiddle.net/HB7LU/454/,但是在设置初始视图状态时存在缺陷(因为在第一次渲染期间无法获取模型值)。任何其他建议都涉及多个子复选框,并通过监视它们来解决问题。
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); }); } }; }])