AngularJS实现全选反选功能

前端之家收集整理的这篇文章主要介绍了AngularJS实现全选反选功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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

效果

<Meta charset="UTF-8"> 全选/取消全选

全选和取消全选

选择@H_403_24@ Box"> 删除 Box"> 删除 Box"> 删除 Box" ng-model="selectAll">

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

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

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

HTML:

{{choseArr}}
全选: Box" ng-model="master" ng-click="all(master,tesarry)">
Box" ng-model="x" ng-checked="master" ng-click="chk(z,x)">{{z}}
删除

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

JS代码

前端显示 var str="";// var flag=‘‘;//是否点击了全选,是为a $scope.x=false;//默认未选中 $scope.all= function (c,v) {//全选 if(c==true){ $scope.x=true; $scope.choseArr=v; }else{ $scope.x=false; $scope.choseArr=[""]; } flag=‘a‘; }; $scope.chk= function (z,x) {//单选或者多选 if(flag==‘a‘) {//在全选的基础上操作 str = $scope.choseArr.join(‘,‘) + ‘,‘; } if (x == true) {//选中 str = str + z + ‘,‘; } else { str = str.replace(z + ‘,‘,‘‘);//取消选中 } $scope.choseArr=(str.substr(0,str.length-1)).split(‘,‘); }; $scope.delete= function () {// 操作CURD if($scope.choseArr[0]==""||$scope.choseArr.length==0){//没有选择一个的时候提示 alert("请至少选中一条数据在操作!") return; }; for(var i=0;i<$scope.choseArr.length;i++){ //alert($scope.choseArr[i]); console.log($scope.choseArr[i]);//遍历选中的id } };
原文链接:https://www.f2er.com/js/51241.html

猜你在找的JavaScript相关文章

姓名@H_403_24@ 操作@H_403_24@