使用AngularJS实现简单:全选和取消全选功能

<!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>

时间: 2024-10-13 08:14:04

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

如何实现复选框的全选和取消全选效果

如何实现复选框的全选和取消全选效果:在很多网站都有这样的功能,当点击一个全选按钮之后,所有的复选框都会被选中,再点击之后会取消全选,功能非常的人性化,可以省却很多人力,下面就简单介绍一下JS如何实现此功能,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://ww

vue实现全选和取消全选

很简单使用的vue全选和取消全选 直接上代码,简单易懂不懂得可以留言. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e

JavaScript全选和取消全选

<html> <head> <title>全选和取消全选</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script language="javascript"> function checkAllorcancelAll(){ //思路:1.获取checkbox的选中状

实现全选和取消全选

点击“全选老大”实现全选,再次点击取消全选,以此类推. html代码是不变的: <div id="mycheckbox"> <input type="checkbox" id="selectAll"><br> <input type="checkbox"><br> <input type="checkbox"><br> &l

Axure 7.0实现复选框全选和取消全选

使用Axure原型工具对产品进行设计,使用复选框来实现全选中和全取消效果,也可以利用按钮或文字做为开关来控制效果,下面主要介绍使用复选框来实现全选中和全取消效果. 1/1 首先输入复选框效果的文字,并为每个复选框建立名称,方便后期对其辨认,例如:选择你最喜欢居住的城市,建立一个全选的复选框进行全选or取消全选效果 1/2 设置全选中 1/2/1 选择全选复选框,双击(选中状态改变时),打开新增用例对话框 1/2/2  设置用例名称,设置条件判断为真 1/2/3 选择(选中),勾选需要被选中的复选

GridView中实现全选与取消全选,以便同时删除多条数据

我们项目后台操作中不可避免的会有同时删除多项的操作,本文实现的就是当点击全选时,选定当前页中所有项,当取消了某一项的选定,则“全选”CheckBox的checked也为false:然后在后台中取到所选定的项的ID,实现同时删除多项的功能. 前台代码 Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--> 1 <%@ Page Language="

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

最近在公司做了一个小项目,其中有一个全选和取消全选的这么一个模块,搞了半天找不到一种最佳的解决方案!后来通过各种努力找到了一种简洁高效的解决办法,这里想和大家分享一下.有问题的话,还望各路大神指导一二. html代码如下: <fieldset data-role="controlgroup">  <label><input type="checkbox" name="boxes" id="select_al

JS对checkbox全选和取消全选

需求:checkbox控制列表数据全选与取消全选择. 效果图: 1.html <body > <input type="button" name="inputfile" id="inputfile" value="点击导入" onclick="open();"/> <input type="file" id="File1" name=&q

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

全选 设置全选button,选中所有的checkbox private void selectAll_Click(object sender, EventArgs e) { //遍历datagridview中的每一行,判断是否选中,若为选中,则选中 for (int i = 0; i < dataGridView1.Rows.Count; i++) { if ((Convert.ToBoolean(dataGridView1.Rows[i].Cells[0].Value) == false))