之前做了一周的打酱油测试,其实感觉其实测试也是上辈子折翼的天使。

好长时间没写代码,感觉好多都不会了。

感谢这周没有单休,我能看熬夜看奥运了。我能有时间出去看个电影,我能有时间出去逛个商城,我能有时间在家憋一篇博文,顺便在家加班写项目的东西。

不加班万岁万岁!!!(求领导看到!哈哈)

然后说正题吧!!!

中国队加油!中国队加油!!!

好吧 真的是正题!!!

需求

1 还有个总的checkbox 负责全选和反选

2 当每一项开头都选中checkbox的时候,上面的全选自动选上

3 当全选后,取消其中一项的checkbox,全选取消

实践

我表示刚开始我是不会的!!!

思路1 上网查找demo

然后开始查资料

发现个不错的网上案例like this > demo

感觉非常符合我的需求,但是看到demo。

缺点: 没玩几下就发现无法符合需求2、3。但是貌似1 是可以实现的。

  • 思路2 ng-checked

开始查了下checkbox在angularjs里面的用法和ng-checked,发现如果用了ng-checked 目测可以实现

html

<div ng-controller="myController">
<label for="flag">全选
<input id="flag" type="checkbox" ng-model="select_all" ng-click="selectAll()">
</label>
<ul>
<li ng-repeat="i in list">
<input type="checkbox" ng-model="m[i.id]" ng-checked = "select_one" ng-click="selectOne(m[i.id])">
<span>{{i.id}}</span>
</li>
</ul>
</div>

js


var app = angular.module('myApp',[]);
app.controller('myController', ['$scope', function ($scope) {
$scope.list = [
{'id': 101},
{'id': 102},
{'id': 103},
{'id': 104},
{'id': 105},
{'id': 106},
{'id': 107}
];
$scope.m = [];
$scope.checked = [];
$scope.selectAll = function () {
if($scope.select_all) {
$scope.select_one = true;
$scope.checked = [];
angular.forEach($scope.list, function (i, index) {
$scope.checked.push(i.id);
$scope.m[i.id] = true;
})
}else {
$scope.select_one = false;
$scope.checked = [];
$scope.m = [];
}
console.log($scope.checked);
};
$scope.selectOne = function (select) {
angular.forEach($scope.m , function (i, id) {
var index = $scope.checked.indexOf(id);
if(i && index === -1) {
$scope.checked.push(id);
} else if (!i && index !== -1){
$scope.checked.splice(index, 1);
};
});
if ($scope.list.length === $scope.checked.length) {
$scope.select_all = true;
} else {
$scope.select_all = false;
}
console.log($scope.checked);
}
}]);
}]);

缺点 参考 not-binding-to-ng-checked-for-checkboxes

大概意思说 如果你用了ng-checked 就是默认它最初定义就是true, 因此就没有必要使用ng-model了。简单说来就是ng-model和ng-checked不需要同时用。

看来是能用ng-click 或者 ng-change了

思路3 给数组里面每一个list 绑定checked 的属性

这个想法也是联想到公司之前的一个大牛的写的一个关于checkbox的指令。

html

<div ng-controller="myController">
<label for="flag">全选
<input id="flag" type="checkbox" ng-model="select_all" ng-change="selectAll()">
</label>
<ul>
<li ng-repeat="i in list">
<input type="checkbox" ng-model="i.checked" ng-change="selectOne()">
<span>{{id}}</span>
</li>
</ul>
</div>

js

var app = angular.module('myApp',[]);
app.controller('myController', ['$scope', function ($scope) {
$scope.list = [
{'id': 101},
{'id': 102},
{'id': 103},
{'id': 104},
{'id': 105},
{'id': 106},
{'id': 107}
];
$scope.m = [];
$scope.checked = [];
$scope.selectAll = function () {
if($scope.select_all) {
$scope.checked = [];
angular.forEach($scope.list, function (i) {
i.checked = true;
$scope.checked.push(i.id);
})
}else {
angular.forEach($scope.list, function (i) {
i.checked = false;
$scope.checked = [];
})
}
console.log($scope.checked);
};
$scope.selectOne = function () {
angular.forEach($scope.list , function (i) {
var index = $scope.checked.indexOf(i.id);
if(i.checked && index === -1) {
$scope.checked.push(i.id);
} else if (!i.checked && index !== -1){
$scope.checked.splice(index, 1);
};
}) if ($scope.list.length === $scope.checked.length) {
$scope.select_all = true;
} else {
$scope.select_all = false;
}
console.log($scope.checked);
}
}]);

推荐第三种方法!以上

参考

angularjs实现 checkbox全选、反选的思考的更多相关文章

  1. 表单javascript checkbox全选 反选 全不选

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  2. 关于Winform下DataGridView中实现checkbox全选反选、同步列表项的处理

    近期接手一个winform 项目,虽然之前有.net 的经验,但是对一些控件的用法还不是很熟悉. 这段时间将会记录一些在工作中遇到的坎坷以及对应的解决办法,写出来与大家分享并希望大神提出更好解决方法来 ...

  3. jquery、js操作checkbox全选反选

    全选反选checkbox在实际应用中比较常见,本文有个不错的示例,大家可以参考下 操作checkbox,全选反选//全选 function checkAll() { $('input[name=&qu ...

  4. checkbox 全选反选实现全代码

    //跳转到指定action function validateForm(url){ if($("#form").form('validate')){ var x=document. ...

  5. C# WinForm中实现CheckBox全选反选功能

    今天一群里有人问到这个功能,其实应该挺简单,但提问题的人问题的出发点并没有描述清楚.因此,一个简简单单的需求,就引起了群内热烈的讨论.下面看看这个功能如何去实现,先上效果: 下面直接上代码,请不要在意 ...

  6. 表单Checkbox全选反选全不选

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Jquery学习笔记(4)--checkbox全选反选

    可能有浏览器兼容性,注意html里的checked是一个属性,存在就默认选中. <!DOCTYPE html> <html lang="en"> <h ...

  8. jQuery实现checkbox全选反选及删除等操作

    1.list.html 说明:用checkbox数组Check[]存放每一行的ID值 <div id="con"> <table width="100% ...

  9. jquery checkbox 全选反选代码只能执行一遍,第二次就失败

    遇到问题背景: 在写到购物车的全选交互的时候,商品选中的状态只有在第一次的时候可以,第二次就无法选中:(代码如下) $(".chooseall").click(function() ...

随机推荐

  1. 大数运算Swift

    前几天开始,打算用Swift写大数的运算,加法跟乘法都已经写好了,写减法发现,真是难,感觉有可能是我的想法不对?不不不我相信我的逻辑. 首先把数字分成小数部分跟整数部分,再遍历一下,识别当前的结果,是 ...

  2. NSAssert的使用

    NSAssert的使用   苹果在foundation.framework中定义了这么一个宏: #define NSAssert(condition, desc, ...)   第一个参数为一个条件判 ...

  3. Python显示函数调用堆栈

    网上找到如下几个思路: 1.用inspect模块 2.用sys._getframe模块 3.用sys.exc_traceback,先抛一个异常,然后抓出traceback #!/usr/bin/env ...

  4. 用文件模拟CMOS保存数据

    Hi3520D 芯片的内置CMOS最多只有5个字节可以用,但是我需要保存的数据有很多. 其中一个解决办法是:可以把其他需要保存的数据放到一个配置文件中.每次写的时候写到配置文件,用的时候再从配置文件读 ...

  5. sge学习 (转)

    转自http://biancheng.dnbcw.info/linux/417992.html 命令: qsub   -  submit a batch job to Grid Engine. qsh ...

  6. 新冲刺Sprint3(第三天)

    一.Sprint会议 更新商品价格.商品描述功能已经完成了,搜索商品功能也正在准备了. 以下是部分功能真机测试下的效果图:     二.Sprint周期 看板: 燃尽图:

  7. http和htpps

    http(超文本传输协议)是一个基于请求与响应模式的.无状态的.应用层的协议.  HTTPS   基于安全套接字层的超文本传输协议 或者是 HTTP over SSL **HTTP 和 HTTPS相同 ...

  8. C++资料收集&整理

    类别 地址 ZLib c++ zlib(qt)压缩与解压缩 STL STL学习之map容器(2)_insert Basic std::nothrow new (nothrow) T() 的原理 C++ ...

  9. lua脚本教程

    --[[工具准备 1.一个支持UTF8无BOM编码的工具,例如:notepad++ 2.一个多文件搜索关键字的工具,例如:File Seeker 3.Eluna对应端的源码 ]]-- --[[网站相关 ...

  10. EF学习笔记——通用增删改查方案

    http://blog.csdn.net/leftfist/article/details/25005307 我刚接触EF未久,还不知道它有什么强大之处,但看上去,EF提供了一般的增删改查功能.以往用 ...