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

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

效果：

<!DOCTYPE html>

<html lang="en" ng-app="myModule5"><!--3、ng-app="myModule5"启动ng并调用模块-->

<head>

  <meta charset="UTF-8">

  <link rel="stylesheet" href="css/bootstrap.css">

  <title>全选/取消全选</title>

</head>

<body>

<div class="container" ng-controller="myCtrl5"><!--4、ng-controller="myCtrl5"启用控制器-->

  <h2>全选和取消全选</h2>

  <table class="table table-bordered">

    <thead>

    <tr>

      <th>选择</th>

      <th>姓名</th>

      <th>操作</th>

    </tr>

    </thead>

    <tbody>

    <tr>

      <td>

        <input ng-checked="selectAll" type="checkbox">

      </td>

      <td>Tom</td>

      <td>

        <button class="btn btn-danger btn-xs">删除</button>

      </td>

    </tr>

    <tr>

      <td>

        <input ng-checked="selectAll" type="checkbox">

      </td>

      <td>Mary</td>

      <td>

        <button class="btn btn-danger btn-xs">删除</button>

      </td>

    </tr>

    <tr>

      <td>

        <input ng-checked="selectAll" type="checkbox">

      </td>

      <td>King</td>

      <td>

        <button class="btn btn-danger btn-xs">删除</button>

      </td>

    </tr>

    </tbody>

  </table>

  <input type="checkbox" ng-model="selectAll">

  <span ng-hide="selectAll">全选</span>

  <span ng-show="selectAll">取消全选</span>

</div>

<script src="js/angular.js"></script><!--1、引入angularJS-->

<script>

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

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

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

  });

</script>

</body>

</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. KnockoutJS 3.X API 第七章 其他技术(3) 延迟更新

    .example { display: inline-block; padding: 1em; margin-right: 2em; background: #F6F6EF; } 注意:本文档适用于K ...

  2. uwp如何建立任何形状的头像，如圆形，方形，六边形等

    最近掌上英雄联盟更新了新的界面,其中“我”界面的更新比较大,我目前还在加紧跟进.在做这个界面的时候,这个头像我想了一下,其实挺好解决的.先上个原图 这个头像一开始我也完全找不到头绪,然后我把头像放大了 ...

  3. 在Thinkphp3.2.3框架下实现自动获取客户端IP地址的get_client_ip()函数

    在Thinkphp框架下使用get_client_ip()函数获取客户端IP地址十分方便: 一行代码便可以实现:$ip = get_client_ip(); 但当我们测试时会遇到后台获取的IP地址显示 ...

  4. Security1:Create Login

    Login 用于登陆SQL Server,语法是 -- Syntax for SQL Server CREATE LOGIN login_name { WITH <option_list1> ...

  5. SQL Server 解读【已分区索引的特殊指导原则】（2）- 唯一索引分区

    一.前言 在MSDN上看到一篇关于SQL Server 表分区的文档:已分区索引的特殊指导原则,如果你对表分区没有实战经验的话是比较难理解文档里面描述的意思.这里我就里面的一些概念进行讲解,方便大家的 ...

  6. unity开发相关环境（vs、MonoDevelop）windows平台编码问题

    情景描述:最近在做Unity的网络底层,用VS编写源码,MonoDevelop用来Debug,在Flash Builder上搭建的Python做协议生成器,期间有无数次Unity莫名奇妙的的down掉 ...

  7. 深入理解DOM事件机制系列第一篇——事件流

    × 目录 [1]历史 [2]事件冒泡 [3]事件捕获[4]事件流 前面的话 javascript操作CSS称为脚本化CSS,而javascript与HTML的交互是通过事件实现的.事件就是文档或浏览器 ...

  8. AngularJS API之$injector ---- 依赖注入

    在AngularJS中也有依赖注入的概念,像spring中的依赖注入,但是又有所不同.Spring中使用构造注入或者设值注入的方式,还需要做一些额外的操作,但是angular中只需要在需要的地方声明一 ...

  9. Connect(); // 2015 简要整理

    去年 Connect(); 2014 Visual Studio Contact(); 直播笔记 对于我个人来说,今年 Connect(); 的三个重要发布: ASP.NET 5 RC1 Entity ...

  10. Repository 仓储，你的归宿究竟在哪？（一）－仓储的概念

    写在前面 写这篇博文的灵感来自<如何开始DDD(完)>,很感谢young.han兄这几天的坚持,陆陆续续写了几篇有关于领域驱动设计的博文,让园中再次刮了一阵"DDD探讨风&quo ...