AngularJS实现全选反选功能  更新时间:2015年12月08日 10:03:41   作者:super_walker   这篇文章主要介绍了AngularJS实现全选反选功能,这里用到AngularJS四大特性之二—-双向数据绑定,对angularjs实现全选反选相关知识感兴趣的朋友一起学习吧 AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了。所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事。 这里用到AngularJS四大特性之二—-双向数据绑定 注意:没写一行DOM代码!这就是ng的优点,bootstrap.css为了布局,JS代码也只是简单创建ng模块和ng控制器 效果: 全选/取消全选 全选和取消全选 选择 姓名 操作 Tom 删除 Mary 删除 King 删除 全选 取消全选 ps:AngularJs 简单实现全选,多选操作 很多时候我们在处理CURD(增删改查)的时候需要实现批量操作数据,这时候就必须使用多选操作。 Angular 中实现如下(当然还有很多种比笔者写的更好的方法,这里只是简单的实现。) HTML: {{choseArr}} 全选: {{z}} 删除 页面效果如下:(CSS采用bootstrap)  JS代码: $scope.tesarry=[‘1‘,‘2‘,‘3‘,‘4‘,‘5‘];//初始化数据 $scope.choseArr=[];//定义数组用于存放前端显示 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 } }; 您可能感兴趣的文章: js实现checkbox全选和反选示例 js实现checkbox全选、不选与反选的方法 JS实现的全选、全不选及反选功能【案例】 javaScript checkbox 全选/反选及批量删除 利用Vue.js实现checkbox的全选反选效果 兼容ie和firefox版本的js反选 全选 多选框 js html css实现复选框全选与反选 javascript实现简单的全选和反选功能 javaScript实现复选框全选反选事件详解 JavaScript实现页面一键全选或反选 angularjs 全选 反选 相关文章 AngularJS实现的自定义过滤器简单示例 这篇文章主要介绍了AngularJS实现的自定义过滤器,结合实例形式分析了AngularJS自定义过滤器的简单定义与使用操作技巧,需要的朋友可以参考下 2019-02-02 在angular 6中使用 less 的实例代码 这篇文章主要介绍了在angular 6中使用 less 的实例代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下 2018-05-05 Angular2平滑升级到Angular4的步骤详解 最近Angular项目组终于发布了新版——正式版 Angular 4.0.0。所以想着就来尝试下升级,记录下整个升级过程分享给大家,所以这篇文章主要介绍了Angular2升级到Angular4的详细步骤,需要的朋友可以参考下。 2017-03-03 详解AngularJS中的filter过滤器用法 这篇文章主要介绍了AngularJS中的filter过滤器用法,包括其在模版中和在controller以及service的常见应用场合,需要的朋友可以参考下 2016-01-01 AngularJS指令详解及示例代码 本文主要介绍AngularJS指令,这里整理了简单的指令并附示例代码,有需要的小伙伴可以参考下 2016-08-08 解决angular2在双向数据绑定时[(ngModel)]无法使用的问题 今天小编就为大家分享一篇解决angular2在双向数据绑定时[(ngModel)]无法使用的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-09-09 AngularJS 中ui-view传参的实例详解 这篇文章主要介绍了AngularJS 中ui-view传参的实例详解的相关资料,这里提供实例帮助大家学习理解这部分内容,需要的朋友可以参考下 2017-08-08 AngularJS Ajax详解及示例代码 本文主要讲解AngularJS Ajax的知识,这里提供详细资料及代码示例,帮助学习AngularJS的朋友,有需要的小伙伴可以参考下 2016-08-08 使用Angular自定义字段校验指令的方法示例 这篇文章主要介绍了使用Angular自定义字段校验指令的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2019-02-02 angularjs自定义ng-model标签的属性 这篇文章主要介绍了angularjs自定义ng-model标签的属性的相关资料,需要的朋友可以参考下 2016-01-01 最新评论

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

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

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

效果:

<!DOCTYPE html>
<html lang="en" ng-app="myModule5"><!--3、ng-app="myModule5"启动ng并调用模块-->
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.css">
<title>全选/取消全选</title>
</head>
<body>
<div class="container" ng-controller="myCtrl5"><!--4、ng-controller="myCtrl5"启用控制器-->
<h2>全选和取消全选</h2>
<table class="table table-bordered">
<thead>
<tr>
<th>选择</th>
<th>姓名</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input ng-checked="selectAll" type="checkbox">
</td>
<td>Tom</td>
<td>
<button class="btn btn-danger btn-xs">删除</button>
</td>
</tr>
<tr>
<td>
<input ng-checked="selectAll" type="checkbox">
</td>
<td>Mary</td>
<td>
<button class="btn btn-danger btn-xs">删除</button>
</td>
</tr>
<tr>
<td>
<input ng-checked="selectAll" type="checkbox">
</td>
<td>King</td>
<td>
<button class="btn btn-danger btn-xs">删除</button>
</td>
</tr>
</tbody>
</table>
<input type="checkbox" ng-model="selectAll">
<span ng-hide="selectAll">全选</span>
<span ng-show="selectAll">取消全选</span>
</div>
<script src="js/angular.js"></script><!--1、引入angularJS-->
<script>
//2、创建自定义模块和控制器
angular.module('myModule5', ['ng']).
controller('myCtrl5', function($scope){
});
</script>
</body>
</html>

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

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

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

HTML:

<section>
<pre>{{choseArr}}</pre>
全选: <input type="checkbox" ng-model="master" ng-click="all(master,tesarry)">
<div ng-repeat="z in tesarry">
<input id={{z}} type="checkbox" ng-model="x" ng-checked="master" ng-click="chk(z,x)">{{z}}
</div>
<a href="#" class="btn btn-danger" ng-click="delete()" > 删除</a>
</section>

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

JS代码:

$scope.tesarry=[‘1‘,‘2‘,‘3‘,‘4‘,‘5‘];//初始化数据
$scope.choseArr=[];//定义数组用于存放前端显示
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
}
};
您可能感兴趣的文章:

  • js实现checkbox全选和反选示例
  • js实现checkbox全选、不选与反选的方法
  • JS实现的全选、全不选及反选功能【案例】
  • javaScript checkbox 全选/反选及批量删除
  • 利用Vue.js实现checkbox的全选反选效果
  • 兼容ie和firefox版本的js反选 全选 多选框
  • js html css实现复选框全选与反选
  • javascript实现简单的全选和反选功能
  • javaScript实现复选框全选反选事件详解
  • JavaScript实现页面一键全选或反选
张贴在3