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

用户名

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

到目前为止,我找到的最接近的解决方案是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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

JavaFX三态复选框

来自分类Dev

Office 功能区中的三态复选框

来自分类Dev

Javafx:如何在 TreeTableView 中实现三态复选框

来自分类Dev

如何在iOS XCode中具有“三态”复选框/开关?

来自分类Dev

在WPF三态复选框中捕获不确定状态

来自分类Dev

是否可以在Microsoft TreeView Control 6.0(MSComctlLib.TreeCtrl.2)中模拟三态复选框?

来自分类Dev

是否可以在Microsoft TreeView Control 6.0(MSComctlLib.TreeCtrl.2)中模拟三态复选框?

来自分类Dev

具有不确定状态的问号的三态复选框插件

来自分类Dev

Firemonkey复选框:Windows和MacOS平台上是否可以使用三态选项?

来自分类Dev

Django中的复选框-最佳做法是什么?

来自分类Dev

在Ember.js中预设复选框的最佳方法是什么?

来自分类Dev

在PostGres数据库中存储复选框的最佳方法是什么

来自分类Dev

Windows中填充的复选框是什么意思?

来自分类Dev

在Angular 8中管理复选框状态的正确方法是什么?

来自分类Dev

为什么AngularJS中的复选框的模型值错误?

来自分类Dev

AngularJS 复选框

来自分类Dev

取消选中angularjs中的复选框

来自分类Dev

使用复选框编辑表中的单个或所有选定用户 - AngularJS

来自分类Dev

单击单个复选框时,取消选中div中的其他复选框

来自分类Dev

TreeView复选框可用作C#.Net中的单个和单独的复选框

来自分类Dev

vb.net数据库查询和复选框,正确的方法是什么?

来自分类Dev

侦听已选中/未选中复选框的正确方法是什么?

来自分类Dev

“复选框”“显示 div”的更简单方法是什么?

来自分类Dev

在更新过程中控制复选框的最佳方法 ReactJS

来自分类Dev

提交时处理Angular中多个复选框的最佳方法

来自分类Dev

条件三态逻辑

来自分类Dev

Laravel 三态登录尝试

来自分类Dev

“提升的小部件”对话框中的“全局包含”复选框是什么意思?

来自分类Dev

android中的Material Design复选框的名称是什么(android.R.drawable。{checkbox})?

Related 相关文章

  1. 1

    JavaFX三态复选框

  2. 2

    Office 功能区中的三态复选框

  3. 3

    Javafx:如何在 TreeTableView 中实现三态复选框

  4. 4

    如何在iOS XCode中具有“三态”复选框/开关?

  5. 5

    在WPF三态复选框中捕获不确定状态

  6. 6

    是否可以在Microsoft TreeView Control 6.0(MSComctlLib.TreeCtrl.2)中模拟三态复选框?

  7. 7

    是否可以在Microsoft TreeView Control 6.0(MSComctlLib.TreeCtrl.2)中模拟三态复选框?

  8. 8

    具有不确定状态的问号的三态复选框插件

  9. 9

    Firemonkey复选框:Windows和MacOS平台上是否可以使用三态选项?

  10. 10

    Django中的复选框-最佳做法是什么?

  11. 11

    在Ember.js中预设复选框的最佳方法是什么?

  12. 12

    在PostGres数据库中存储复选框的最佳方法是什么

  13. 13

    Windows中填充的复选框是什么意思?

  14. 14

    在Angular 8中管理复选框状态的正确方法是什么?

  15. 15

    为什么AngularJS中的复选框的模型值错误?

  16. 16

    AngularJS 复选框

  17. 17

    取消选中angularjs中的复选框

  18. 18

    使用复选框编辑表中的单个或所有选定用户 - AngularJS

  19. 19

    单击单个复选框时,取消选中div中的其他复选框

  20. 20

    TreeView复选框可用作C#.Net中的单个和单独的复选框

  21. 21

    vb.net数据库查询和复选框,正确的方法是什么?

  22. 22

    侦听已选中/未选中复选框的正确方法是什么?

  23. 23

    “复选框”“显示 div”的更简单方法是什么?

  24. 24

    在更新过程中控制复选框的最佳方法 ReactJS

  25. 25

    提交时处理Angular中多个复选框的最佳方法

  26. 26

    条件三态逻辑

  27. 27

    Laravel 三态登录尝试

  28. 28

    “提升的小部件”对话框中的“全局包含”复选框是什么意思?

  29. 29

    android中的Material Design复选框的名称是什么(android.R.drawable。{checkbox})?

热门标签

归档