当前位置:Gxlcms > JavaScript > AngularJS实现全选反选功能_AngularJS

AngularJS实现全选反选功能_AngularJS

时间:2021-07-01 10:21:17 帮助过:23人阅读

AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了。所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事。

这里用到AngularJS四大特性之二----双向数据绑定

注意:没写一行DOM代码!这就是ng的优点,bootstrap.css为了布局,JS代码也只是简单创建ng模块和ng控制器

效果:

ps:AngularJs 简单实现全选,多选操作

很多时候我们在处理CURD(增删改查)的时候需要实现批量操作数据,这时候就必须使用多选操作。

Angular 中实现如下(当然还有很多种比笔者写的更好的方法,这里只是简单的实现。)

HTML:

全选:
{{z}}
删除

页面效果如下:(CSS采用bootstrap) 

JS代码:

人气教程排行