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

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

效果：

  1. <!DOCTYPE html>
  2. <html lang="en" ng-app="myModule5"><!--3、ng-app="myModule5"启动ng并调用模块-->
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <link rel="stylesheet" href="css/bootstrap.css">
  6.   <title>全选/取消全选</title>
  7. </head>
  8. <body>
  9. <div class="container" ng-controller="myCtrl5"><!--4、ng-controller="myCtrl5"启用控制器-->
  10.   <h2>全选和取消全选</h2>
  11.   <table class="table table-bordered">
  12.     <thead>
  13.     <tr>
  14.       <th>选择</th>
  15.       <th>姓名</th>
  16.       <th>操作</th>
  17.     </tr>
  18.     </thead>
  19.     <tbody>
  20.     <tr>
  21.       <td>
  22.         <input ng-checked="selectAll" type="checkbox">
  23.       </td>
  24.       <td>Tom</td>
  25.       <td>
  26.         <button class="btn btn-danger btn-xs">删除</button>
  27.       </td>
  28.     </tr>
  29.     <tr>
  30.       <td>
  31.         <input ng-checked="selectAll" type="checkbox">
  32.       </td>
  33.       <td>Mary</td>
  34.       <td>
  35.         <button class="btn btn-danger btn-xs">删除</button>
  36.       </td>
  37.     </tr>
  38.     <tr>
  39.       <td>
  40.         <input ng-checked="selectAll" type="checkbox">
  41.       </td>
  42.       <td>King</td>
  43.       <td>
  44.         <button class="btn btn-danger btn-xs">删除</button>
  45.       </td>
  46.     </tr>
  47.  
  48.     </tbody>
  49.   </table>
  50.  
  51.   <input type="checkbox" ng-model="selectAll">
  52.   <span ng-hide="selectAll">全选</span>
  53.   <span ng-show="selectAll">取消全选</span>
  54. </div>
  55. <script src="js/angular.js"></script><!--1、引入angularJS-->
  56. <script>
  57.   //2、创建自定义模块和控制器
  58.   angular.module('myModule5', ['ng']).
  59.     controller('myCtrl5', function($scope){
  60.  
  61.   });
  62. </script>
  63. </body>
  64. </html>

使用AngularJS实现简单:全选和取消全选功能的更多相关文章

  1. jQuery --checkbox全选和取消全选简洁高效的解决办法

    最近在公司做了一个小项目,其中有一个全选和取消全选的这么一个模块,搞了半天找不到一种最佳的解决方案!后来通过各种努力找到了一种简洁高效的解决办法,这里想和大家分享一下.有问题的话,还望各路大神指导一二 ...

  2. bootstrap实现checkbox全选、取消全选

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 最新版本的 ...

  3. JS对checkbox全选和取消全选

    需求:checkbox控制列表数据全选与取消全选择. 效果图: 1.html <body > <input type="button" name="in ...

  4. react实现全选、取消全选和个别选择

    react里面实现全选和取消全选,个别选择等操作,效果如下 代码: import React, {Component} from 'react' export default class Demo e ...

  5. DataGridView添加一行数据、全选、取消全选、清空数据、删除选中行

    .net 2005下的Windows Form Application,一个DataGridView控件和4个Button,界面设置如下:         代码如下,有注解,相信大家都看得明白:   ...

  6. js实现checkbox组 全选和取消全选

    做后台管理程序时,用到一个checkbox组的全选和取消全选的功能, 主要是逻辑上的坑,理清后大概是: 1.全选点击后,小弟1~4都要选上,点击取消,小弟们也要取消 2.只要有一个小弟取消时,全选要取 ...

  7. js全选与取消全选

    实现全选与取消全选的效果 要求1(将军影响士兵):点击全选按钮,下面的复选框全部选中,取消全选按钮,下面的复选框全部取消 思路:复选框是否被选中,取决于check属性,将全选按钮的check属性值赋值 ...

  8. JS实现表单全选以及取消全选实例

    实现效果: 全选按钮:点击全选按钮所有的小按钮都会被选中:点掉全选按钮,所有按钮取消选中: 小按钮:只有全部被选中,全选按钮才会被选中 思路分析: 1.全选和取消全选做法:让下面所有复选框的 chec ...

  9. datagridview里面的checkbox全选和取消全选

    全选 设置全选button,选中所有的checkbox private void selectAll_Click(object sender, EventArgs e) { //遍历datagridv ...

随机推荐

  1. OPEN CASCADE Curve Continuity

    OPEN CASCADE Curve Continuity eryar@163.com Abstract. 设计一条复杂曲线时,出于设计和制造上的考虑,常常通过多段曲线组合而成,这就需要解决曲线段之间 ...

  2. ASP.NET MVC之国际化（十一）

    前言 在项目中遇到国际化语言的问题是常有的事情,之前在做关于MVC国际化语言时,刚开始打算全部利用AngularJS来实现,但是渐渐发现对于页面Title难以去控制其语言转换,于是对于页面Tiltle ...

  3. 取消vs2013在solution中单击打开文件的功能

    2013用了一段时间,不错,就是单击会打开文件,有点恼人(因人而异吧).解决方案: 取消红色框框里面的那个checkbox就ok了. 来自为知笔记(Wiz)

  4. Lua 性能相关笔记

    1.创建一个闭合函数要比创建一个table更廉价,访问非局部的变量也比table字段更快. 2.访问局部变量要比全局变量更快,尽可能的使用局部变量,可以避免无用的名称引入全局环境. 3.do-end语 ...

  5. Apache Sqoop - Overview——Sqoop 概述

    Apache Sqoop - Overview Apache Sqoop 概述 使用Hadoop来分析和处理数据需要将数据加载到集群中并且将它和企业生产数据库中的其他数据进行结合处理.从生产系统加载大 ...

  6. [Keras] Install and environment setting

    Documentation: https://keras.io/ 1. 利用anaconda 管理python库是明智的选择. conda update conda conda update anac ...

  7. 分享个刚写好的 android 的 ListView 动态加载类，功能全而代码少。

    (转载声明出处:http://www.cnblogs.com/linguanh/) 简介:      该ListView 实现动态加载数据,为了方便用户充分地自定义自己的数据源.点击事件,等核心操作, ...

  8. 软件开发常用设计模式—单例模式总结（c++版）

    单例模式:就是只有一个实例. singleton pattern单例模式:确保某一个类在程序运行中只能生成一个实例,并提供一个访问它的全局访问点.这个类称为单例类.如一个工程中,数据库访问对象只有一个 ...

  9. Winform在线更新

    引言 2015年第一篇,Winform在线更新,算是重操旧业吧,09年刚到北京时一直做硬件联动编程,所以大多数时间都在搞Winform, 但是从来没做过在线更新这个功能,前几天参与部门另一个项目,上来 ...

  10. 在ASP.NET MVC 中获取当前URL、controller、action

    一.URL的获取很简单,ASP.NET通用: [1]获取 完整url (协议名+域名+虚拟目录名+文件名+参数) string url=Request.Url.ToString(); [2]获取 虚拟 ...