AngularJS实现全选反选功能_AngularJS
来源：懂视网
责编：小采
时间：2020-11-27 21:46:55
AngularJS实现全选反选功能_AngularJS
AngularJS实现全选反选功能_AngularJS:AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。所以我做了一些工作（你也可以觉得是小花招）来让浏览器做我想要的事。 这里用到AngularJS四大特性之二---
导读AngularJS实现全选反选功能_AngularJS:AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。所以我做了一些工作（你也可以觉得是小花招）来让浏览器做我想要的事。 这里用到AngularJS四大特性之二---
AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。所以我做了一些工作（你也可以觉得是小花招）来让浏览器做我想要的事。
这里用到AngularJS四大特性之二----双向数据绑定
注意：没写一行DOM代码！这就是ng的优点，bootstrap.css为了布局，JS代码也只是简单创建ng模块和ng控制器
效果：
很多时候我们在处理CURD（增删改查）的时候需要实现批量操作数据，这时候就必须使用多选操作。
Angular 中实现如下（当然还有很多种比笔者写的更好的方法，这里只是简单的实现。）
HTML：
全选:
{{z}}
删除
页面效果如下：（CSS采用bootstrap）
JS代码：
AngularJS实现全选反选功能_AngularJS
AngularJS实现全选反选功能_AngularJS:AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。所以我做了一些工作（你也可以觉得是小花招）来让浏览器做我想要的事。 这里用到AngularJS四大特性之二---
