Angualr 实现复选框全选功能
html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>document</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="mainCtrl">
<label>全选<input type="checkbox" ng-model="selectAll" ng-click="all(selectAll)"></label><br/>
<div ng-repeat="person in persons" class="items">
<label>{{person.name}}:<input type="checkbox" ng-checked="person.state" ng-model="person.state" ng-click="every()"> </label><br/>
</div>
<!-- <div>selectAll : {{selectAll}}</div>
<div ng-repeat="person in persons">
{{person.name}} : {{person.state}}
</div> -->
</div>
<body>
js
angular.module("myApp",[])
.controller("mainCtrl", function ($scope) {
$scope.selectAll=false;
$scope.all= function (m) {
for(var i=0;i<$scope.persons.length;i++){
$scope.persons[i].state=m;
}
};
$scope.every = function(){
for(var i=0;i<$scope.persons.length;i++){
if($scope.persons[i].state==false){
$scope.selectAll=false;
return;
}
$scope.selectAll=true;
}
};
$scope.persons=[
{name:"a",state:false},
{name:"b",state:false},
{name:"c",state:false},
{name:"d",state:false}
]
});
Angualr 实现复选框全选功能的更多相关文章
- JavaScript小例子：复选框全选
JavaScript小例子:复选框全选 这只是一个小例子,很简单,但是这个功能还是很常用的: 实现后效果如图: JavaScript代码: <script type="text/jav ...
- vue+vant-UI框架写的购物车的复选框全选和反选
购物车页面的设计图 商品的列表 代码: <ul v-if="shoppingListData.rows.length"> <li v-for="(ite ...
- js 复选框 全选都选 如果某一个子复选框没选中 则全选按钮不选中
<!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>js 复选框 全选都选 ...
- Jquery表格变色 复选框全选，反选
/*jquery静态表格变色*/ $(".tr2").mouseover(function(){ $(this).css("background"," ...
- 复选框全选、全不选和反选的效果实现VIEW:1592
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- html+css+js实现复选框全选与反选
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- checkbox复选框全选批量删除
多选框全选实现批量删除 html代码 <body> <form action="" method="post" name="Form ...
- toFixed（）精度丢失；复选框全选、取消
一.精度丢失和重写toFixed()函数 1.重写toFixed() Number.prototype.toFixed = function(length){ var carry = 0; //存放进 ...
- jQuery 复选框全选/取消全选/反选
jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...
- js 判断 复选框全选、全不选、反选、必选一个
一个挺 使用的 js 代码片段, 判断 复选框全选.全不选.反选.必选一个 记录下, 搬来的 思路: 修改数据的 选中与否状态, 拿到所有的输入框,看是否有选中的状态 <html> & ...
随机推荐
- js,add script async? loaded ok.
function loadScript(url, callback){ var script = document.createElement_x("script") script ...
- bonds
Linux--多网卡的7种Bond模式 http://www.cnblogs.com/lcword/p/5914089.html 七种网卡绑定模式详解: http://blog.csdn.net/w ...
- hdu 5698(杨辉三角的性质+逆元)
---恢复内容开始--- 瞬间移动 Accepts: 1018 Submissions: 3620 Time Limit: 4000/2000 MS (Java/Others) Memory Limi ...
- java 仓库maven
工具: apache-maven-3.2.3.zip maven_data.zip 在java Window->Preferences->Maven中 Installations中添加ap ...
- 转载——分享一个html+js+ashx+easyui+ado.net权限管理系统
EasyUI.权限管理 这是个都快被搞烂了的组合,但是easyui的确好用,权限管理在项目中的确实用.一直以来博客园里也不少朋友分享过,但是感觉好的要不没源码,要不就是过度设计写的太复杂看不懂,也懒得 ...
- BZOJ2870—最长道路tree
最长道路tree Description H城很大,有N个路口(从1到N编号),路口之间有N-1边,使得任意两个路口都能互相到达,这些道路的长度我们视作一样.每个路口都有很多车辆来往,所以每个路口i都 ...
- mysql-实现远程连接(授权法)
远程连接阿里云主机的mysql,遇到以下问题: 1.连接被拒,无法连接 可能原因:1.3306(默认)端口未开放,在控制台设置防火墙规则: 2. host字段的值改为%就表示在任何客户端机器上能以ro ...
- [field:description /]标签如何限制字数?|DedeCms
[field:description /]标签如何限制字数? [field:description function='cn_substr(@me,80)'/]dede 里的所有标记都支持这样使用函数 ...
- ajax跨域解决办法
在使用jquery的ajax作请求时,http://127.0.0.1:8080,类似这样的一个本地请求,会产生跨域问题, 解决办法一: jsonp: var url= "http://12 ...
- 2017.2.20 activiti实战--第一章--认识Activiti
学习资料:<Activiti实战> 第一章 认识Activiti 内容概览:讲解activiti的特点.接口概览.架构等基本信息. 1.3 Activiti的特点 1.使用mybatis ...