资讯专栏INFORMATION COLUMN

angularjs 多选框的实现

dreamans / 2345人阅读

摘要:目标效果最初的想法,当为时,多选框为勾选状态,而则可以与勾选的状态值绑定,代码如下代码控制器中的测试数据效果显然并不是我想要的,在全选后下面的并没有跟着改变,所以仅靠页面是无法实现全选效果的所以我在控制器里添加了一个方法,在点击全选的时

目标效果:

最初的想法,ng-checked="xxx"当xxx为true时,多选框为勾选状态,而ng-model则可以与勾选的状态值绑定,代码如下:
html代码

控制器中的测试数据:

效果:

显然并不是我想要的,在全选后下面的false并没有跟着改变,所以仅靠页面是无法实现全选效果的
所以我在控制器里添加了一个方法,在点击全选的时候将所有数据的checked改变为true,取消勾选时改变为false
v层代码如下:

控制器代码如下:

效果如下:

虽然下面的状态改变了,但没有按照预期变化,反而是勾选时false,非勾选时为true

打开控制台,打断点,发现传给c层的all为false,也就是说先进行ng-click,然后才是ng-model的数值绑定

既然结果反着来,那么我就在传all时也反着来

效果如下,就是我想要的

思考:为什么要反着传值才行呢?
猜想:

总结

虽然实现了效果,但这样实现毕竟感觉怪怪的,希望能有更好的解决方案
最后,感谢朴世超学长的帮助

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/98255.html

相关文章

  • AngularJs 功能(三)--数据绑定丶作用域

    摘要:功能数据绑定的双向数据绑定,一方面可以做到变化驱动了中元素变化,另一方面也可以做到元素的变化也会影响到。其次告诉,对页面上的这个进行双向数据绑定。第三告诉,在这个指令模版上显示这个的数据。作用域是一个把一个元素连结到上的对象。 功能 数据绑定 AngularJS的双向数据绑定,一方面可以做到model变化驱动了DOM中元素变化,另一方面也可以做到DOM元素的变化也会影响到Model。 ...

    joywek 评论0 收藏0
  • 构建静态页面 之 [ 表单 ]

    摘要:表单表单元素元素表示设置表单属性设置接收表单的指定服务器端的地址路径属性表示发送给服务器端的方式属性值默认值将提交的数据添加到地址栏中进行提交有限制,不安全属性值将提交的数据绑定在表单中进行提交没有限制,相对安全属性提交表单时要设 表单 表单元素 元素 表示设置表单 action属性 - 设置接收表单的指定服务器端的地址路径 method属性 - 表示发送给服务器端的方式 ge...

    zhangwang 评论0 收藏0
  • 构建静态页面 之 [ 表单 ]

    摘要:表单表单元素元素表示设置表单属性设置接收表单的指定服务器端的地址路径属性表示发送给服务器端的方式属性值默认值将提交的数据添加到地址栏中进行提交有限制,不安全属性值将提交的数据绑定在表单中进行提交没有限制,相对安全属性提交表单时要设 表单 表单元素 元素 表示设置表单 action属性 - 设置接收表单的指定服务器端的地址路径 method属性 - 表示发送给服务器端的方式 ge...

    snifes 评论0 收藏0
  • HTML表单元素及CSS

    摘要:表单一介绍标签表示为表单,表单元素是允许用户在表单中输入内容。属性值被提交表单的类型二表单组件组件一般被定义在表单中标签中标签表示输入框,为空标签。属性,属性规定要显示的元素的类型。冒号表示分隔符,分号表示结束符。 表单 一、介绍 标签表示为表单,表单元素是允许用户在表单中输入内容。 属性:action-提交表单的地址 Method-提交表单的方式。属性值:get/post ...

    MyFaith 评论0 收藏0
  • HTML表单元素及CSS

    摘要:表单一介绍标签表示为表单,表单元素是允许用户在表单中输入内容。属性值被提交表单的类型二表单组件组件一般被定义在表单中标签中标签表示输入框,为空标签。属性,属性规定要显示的元素的类型。冒号表示分隔符,分号表示结束符。 表单 一、介绍 标签表示为表单,表单元素是允许用户在表单中输入内容。 属性:action-提交表单的地址 Method-提交表单的方式。属性值:get/post ...

    jayzou 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<