怎么样在Angular做的表格中添加一个类似checkbox可以勾选的框？

nuaamns 2019-07-24 03:21:02

表格中的内容来自数据库，有一个boolean的字段，需要在表格中以对号的形式呈现。
例如数据库中某一条数据的boolean字段是true，那就再表格中宣示对号，为false就不显示。
修改值需要双向绑定。

...全文

248 2 打赏收藏转发到动态举报

写回复

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

nuaamns 2019-07-24

打赏
举报

回复

有大神可以帮帮我吗？

nuaamns 2019-07-24

打赏
举报

回复

我用primeng做的表格

开发业务后台经常要用到表格里的选择，全选这种交互。而且不同系统不同场景的UI还不一样。比如：表格里就是简简单单的checkbox；图片列表这种，UI设计师会搞点花样，用户选择一下，会在图片上盖一层半透明的勾选提示等等。我们的系统是用angular 1.X版本开发。所以，我采用angular的装饰性指令编写几个指令，把它们配合在一起使用，来封装这样的场景。这与之前我们遇到的组件的开发思路又不太一样。我们先来分析一下需求及扩展点。需求分析实现单选；实现全选；可以设置允许多选还是单选。如果多选，有最大选择数限制；实现跨页选择。这里的跨页选择指的是切换到下一页后，还能记住上一

Angular Js 里面table, checkbox制作可多选，单选的表格查看别人的方法再加拓展，忘记了原博客地址；主要实现主表格里面可以展开子表，子表的信息可以多选也可以单选，并绑定数据，算是三级选中吧？；复选框只有两个值：true或者false，因此在AngularJS中，一般都是将复选框的ng-model绑定为一个布尔值属性，通过这两个布尔值来决定其勾选状态，以及通过其勾选状态来设

Angular4+AdminLTE+Jeecg 前后端分离框架实战涉及技术点：angular4、nodejs、Typescript、Angular CLI、npm、AdminLTE

概要 Angular数据的双向绑定，要使用[(ngModel)]指令。但是，在使用过程中，我们不难发现，该指令在对CheckBox列表做双向数据绑定时候，并不是很好用。因为Angular中的[(ngModel)]无法像Vue中的v-model指令那样，接收一个数组。当前CheckBox的value值存在于数组中，则当前CheckBox处于选中状态，反之，处于未选中状态。对于CheckBox列表，一般后端传给前端的是一个选中项的Id列表，如果我们直接使用[(ngModel)]进行绑定，则需要对列表数据进行

html页面代码： <table class="table ordertable label-table"> <thead> <tr> <th style="width:10%;"> <input type="checkbox" ng-checked="selectAllButton()" ng-click="clickSelectAll($event)">全选

Windows客户端开发

7,655

社区成员

18,845

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章