html

  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title>document</title>
  5.     <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  6.     <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
  7. </head>
  8. <body ng-app="myApp">
  9.     <div ng-controller="mainCtrl">
  10.         <label>全选<input type="checkbox" ng-model="selectAll" ng-click="all(selectAll)"></label><br/>
  11.         <div ng-repeat="person in persons" class="items">
  12.             <label>{{person.name}}:<input type="checkbox" ng-checked="person.state" ng-model="person.state" ng-click="every()"> </label><br/>
  13.         </div>  
  15.         <!-- <div>selectAll : {{selectAll}}</div>
  16.         <div ng-repeat="person in persons">
  17.             {{person.name}} : {{person.state}}
  18.         </div>   -->
  19.     </div>
  20. <body>

js

  1. angular.module("myApp",[])
  2. .controller("mainCtrl", function ($scope) {
  3.     $scope.selectAll=false;
  4.     $scope.all= function (m) {
  5.         for(var i=0;i<$scope.persons.length;i++){
  6.           $scope.persons[i].state=m;
  7.         }
  8.     };  
  10.     $scope.every = function(){
  11.         for(var i=0;i<$scope.persons.length;i++){
  12.           if($scope.persons[i].state==false){
  13.             $scope.selectAll=false;
  14.             return;
  15.           }
  16.           $scope.selectAll=true;
  17.         }
  18.     };
  19.     $scope.persons=[
  20.         {name:"a",state:false},
  21.         {name:"b",state:false},
  22.         {name:"c",state:false},
  23.         {name:"d",state:false}
  24.     ]
  25. });

Angualr 实现复选框全选功能的更多相关文章

  1. JavaScript小例子：复选框全选

    JavaScript小例子:复选框全选 这只是一个小例子,很简单,但是这个功能还是很常用的: 实现后效果如图: JavaScript代码: <script type="text/jav ...

  2. vue+vant-UI框架写的购物车的复选框全选和反选

    购物车页面的设计图 商品的列表 代码: <ul v-if="shoppingListData.rows.length"> <li v-for="(ite ...

  3. js 复选框 全选都选 如果某一个子复选框没选中 则全选按钮不选中

    <!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>js 复选框 全选都选 ...

  4. Jquery表格变色 复选框全选，反选

    /*jquery静态表格变色*/ $(".tr2").mouseover(function(){ $(this).css("background"," ...

  5. 复选框全选、全不选和反选的效果实现VIEW:1592

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  6. html+css+js实现复选框全选与反选

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  7. checkbox复选框全选批量删除

    多选框全选实现批量删除 html代码 <body> <form action="" method="post" name="Form ...

  8. toFixed（）精度丢失；复选框全选、取消

    一.精度丢失和重写toFixed()函数 1.重写toFixed() Number.prototype.toFixed = function(length){ var carry = 0; //存放进 ...

  9. jQuery 复选框全选/取消全选/反选

    jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...

  10. js 判断 复选框全选、全不选、反选、必选一个

    一个挺 使用的 js 代码片段,  判断  复选框全选.全不选.反选.必选一个 记录下, 搬来的 思路: 修改数据的 选中与否状态, 拿到所有的输入框,看是否有选中的状态 <html> & ...

随机推荐

  1. 《Linux命令行与shell脚本编程大全 第3版》Linux命令行---52

    以下为阅读<Linux命令行与shell脚本编程大全 第3版>的读书笔记,为了方便记录,特地与书的内容保持同步,特意做成一节一次随笔,特记录如下:

  2. mysql error 1093 解决办法

    mysql> select * from t; +----+ | id | +----+ | 1 | | 2 | | 3 | | 4 | | 5 | | 6 | | 7 | | 8 | | 9 ...

  3. RadioGroup动态添加RadioButton，并且获得事件

    由于有许多的RadioButton是动态的,不是固定的一些,所以需要在代码中,动态的添加到RadioGroup中,下面是我的实现方法. 1.添加RadioButton到RadioGroup中 Radi ...

  4. JMeter常见四种变量简介

    在JMeter自动化测试脚本编写过程中,经常需要对测试脚本进行一些参数设置.例如,设置测试计划的全局变量(方便切换不同的测试环境).样本线程(HTTP请求等)的参数传递等. 通常,JMeter中常用的 ...

  5. Machine Learning Done Wrong【转】

    1. Take default loss function for granted Many practitioners train and pick the best model using the ...

  6. log4j 2使用properties文件进行配置

    网上不少文章给的都是用xml进行配置,也会提到无法使用properties文件对log4j进行配置,但那应该只是在他们写文章的时候才是如此,最新的2.8.2版本经过我试验后是可以做到的当然该文件最好放 ...

  7. The web application [/struts2_0100] created a ThreadLocal with key of type

    引用: 严重: The web application [/struts2_0100] created a ThreadLocal with key of type [com.opensymphony ...

  8. 新学到的linux命令

    whatis xxx whatis ls 会返回一个ls的简要说明,可以简单的告诉你该命令的作用,不用man去看一大堆没啥用的英文 HISTTIMEFORMAT="%d/%m/%y %T & ...

  9. osgcuda 【转】

    原文 : http://blog.sina.com.cn/s/blog_df1b276a0101inbi.html osgCompute是对代码的并行流处理器执行的抽象基库.库连接到OSG的(OSG) ...

  10. TortoiseGit在github上创建工程

    一.前期准备 TortoiseGit官网下载地址:http://code.google.com/p/tortoisegit/ git下载地址:https://git-scm.com/download/ ...