angularjscheckbox全选_AngularJS实现全选反选功能

这篇文章主要介绍了AngularJS实现全选反选功能，这里用到AngularJS四大特性之二----双向数据绑定，对angularjs实现全选反选相关知识感兴趣的朋友一起学习吧

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

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

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

效果：

全选/取消全选

全选和取消全选

选择姓名操作

Tom

删除

Mary

删除

King

删除

全选

取消全选

//2、创建自定义模块和控制器

angular.module('myModule5', ['ng']).

controller('myCtrl5', function($scope){

});

ps：AngularJs 简单实现全选，多选操作

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

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

HTML：

{{choseArr}}

全选:

删除

页面效果如下：(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

//alert($scope.choseArr[i]);

console.log($scope.choseArr[i]);//遍历选中的id

}

};

angularjscheckbox全选_AngularJS实现全选反选功能相关推荐

angularjscheckbox全选_angularJS全选功能实现
最近在做的一个项目要增加全选和反选功能,之前只做过JQ版的全选和反选. 实现效果: 1.点击全选checkbox可以切换全选和全部清空 2.点击列表中的checkbox,当全部选中时全选选中 3.在全 ...
Javascript实现复选框(全选反选功能)
在一个项目开发中我们经常见到页面会有复选框的全选和反选功能,这样我们才能够进行下一步的批量删除或者实现其他的功能,那我们应该怎样去实现这样的一个功能呢?其实想要实现复选框的全选和反选功能很简单只要得到 ...
js实现全选和反选功能
最近没事做,就用js写了一个复选框选择全选时,下面的按钮也都会选择上,当下面的选框被全选时,全选按钮也会被选中;还实现了一个反选功能,可供大家参考,如果大家有好的建议也可以给我留言,我们一起学习... ...
【jQuery】复选框的全选、反选，推断哪些复选框被选中
本文与<[JavaScript]复选框的全选.反选.推断哪些复选框被选中>(点击打开链接)为姊妹篇,把里面内容再与jQuery框架中实现一次,相同做到例如以下的效果: 布局还是相同的布局, ...
JS 原生实现复选框全选反选功能
** JS 原生实现复选框全选反选功能 ** 按钮功能实现思路: 全选按钮: 直接将全选按钮的状态赋值给每一个复选框. 复选框:只有当所有的复选框选中时,全选按钮才能选中,所以每当复选框每点击一次就 ...
jQuery实现复选框的全选和反选：
jQuery实现复选框的全选和反选: 截图如下: 代码如下: index.jsp: <%@ page language="java" import="java.ut ...
checkbox全选和反选功能
用jQuery实现checkbox的全选和反选功能,当checkbox禁用时候不参与全选功能 <!DOCTYPE html> <html> <head><ti ...
关于用jQuery实现的checkbox全选和反选功能
用jQuery实现了checkbox的全选和反选功能,代码如下: <!DOCTYPE html> <html> <head> <meta charse ...
如何利用jq来实现复选框的全选，反选！
如何利用jq来实现复选框的全选,反选! $("document").ready(function(){ $("#btn1").click(function() ...

angularjscheckbox全选_AngularJS实现全选反选功能

全选和取消全选

angularjscheckbox全选_AngularJS实现全选反选功能相关推荐

最新文章

热门文章