有一个简单的方法来放置一个网页上的一个三态复选框,将其绑定到一个布尔模型,以便后者可以采取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);
});
}
};
}])
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句