html代码

<!-- 数据表格 -->
<div class="table-box"> <!--工具栏-->
<div class="pull-left">
<div class="form-group form-inline">
<div class="btn-group">
<button type="button" class="btn btn-default" title="新建" data-toggle="modal"
data-target="#editModal" ng-click="entity={}"><i class="fa fa-file-o"></i> 新建
</button>
<button type="button" class="btn btn-default" title="删除"><i class="fa fa-trash-o"></i> 删除</button>
<button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i
class="fa fa-refresh"></i> 刷新
</button>
</div>
</div>
</div>
<div class="box-tools pull-right">
<div class="has-feedback">
品牌名称:<input ng-model="searchEntity.name">
&nbsp;&nbsp;&nbsp;品牌首字母:<input ng-model="searchEntity.firstChar">
&nbsp;&nbsp;&nbsp;<button class="btn btn-default" ng-click="reloadList()">查询</button>
</div>
</div>
<!--工具栏/--> <!--数据列表-->
<table id="dataList" class="table table-bordered table-striped table-hover dataTable">
<thead>
<tr>
<th class="" style="padding-right:0px">
<input id="selall" type="checkbox" class="icheckbox_square-blue" ng-checked="ifCheckedAll()" ng-click="selectAll($event)">
</th>
<th class="sorting_asc" >品牌ID</th>
<th class="sorting">品牌名称</th>
<th class="sorting">品牌首字母</th>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody>
{{selectIds}}
<tr ng-repeat="entity in list">
<td><input type="checkbox" ng-click="updateSelection($event,entity.id)" ng-checked="ifChecked(entity.id)"></td>
<td>{{entity.id}}</td>
<td>{{entity.name}}</td>
<td>{{entity.firstChar}}</td>
<td class="text-center">
<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal" ng-click="selectByOne(entity.id)">修改
</button>
</td>
</tr> </tbody>
</table>

js代码

//更新复选
$scope.selectIds=[];//选中的ID集合
$scope.updateSelection=function ($event, id) {
if ($event.target.checked){//如果被选中,则添加到数组中
$scope.selectIds.push(id);
}else {
var index = $scope.selectIds.indexOf(id);
$scope.selectIds.splice(index,1);//其中index表示删除的位置,1表示删除一个
}
}; $scope.ifChecked=function (id) {
//如果Id出现在数组中,则需要返回true
var index=$scope.selectIds.indexOf(id);
if (index==-1){
return false;
}else {//如果id没有出现在selectIds数组中需要返回false
return true;
}
}; $scope.ifCheckedAll=function () {
//$scope.list中的对象的id 是否都在 $scope.selectIds中
//如果全中,则返回true
//如果有一个还在,就返回false
alert("ifCheckAll");
for (var i = 0; i < $scope.list.length; i++) {
if ($scope.selectIds.indexOf($scope.selectIds[i])==-1){
return false;
}
}
return true;
};
//全选与取消全选
$scope.selectAll=function ($event) {
alert("dfadfas");
if ($event.target.checked){
for (var i = 0; i < $scope.list.length; i++) {
//当前页面的数据的id放到数组中
if ($scope.selectIds.indexOf($scope.list[i].id)==-1){
$scope.selectIds.push($scope.list[i].id);
}
}
}else{
for (var i=0;i<$scope.list.length;i++){
var index=$scope.selectIds.indexOf($scope.list[i].id);
$scope.selectIds.splice(index);
}
}
};

AngularJs实现全选功能的更多相关文章

  1. AngularJS 的全选、反选实现

    目录 AngularJS 的全选.反选实现 一.需求 二.思路 三.实现 AngularJS 的全选.反选实现 一.需求 要使用 AngularJS 实现 checkbox 的全选.反选. 其中所有项 ...

  2. js初学—实现checkbox全选功能

    布局如下: <p ><input type="checkbox" id="che1"/>全选</p><div id=& ...

  3. C# winform中的datagridview控件标头加入checkbox,实现全选功能。

    /// <summary> /// 给DataGridView添加全选 /// </summary> public class AddCheckBoxToDataGridVie ...

  4. jquery实现全选功能

    主要是模拟一些网页中的表格实现全选功能. <form> 你爱好的运动是: <input type="checkbox" id="Check" ...

  5. Form - CHECKBOX全选功能

    FORM BUILDER开发,遇到这样一个需求: 添加一个CHECKBOX完成全选功能,红框为新添加的CHECKBOX(如图示) Try to use APP_RECORD.FOR_ALL_RECOR ...

  6. Android ListView条目全选功能,不用checkbox实现!

    大家好,翻了翻曾经的笔记,发现了一个我特别标记的功能,那就是ListView全选功能,顿时想起了我那个时候苦逼的生涯,因为我大学机械出身,大学毕业了都不知道什么叫代码,在58干了一段销售.实在是干不下 ...

  7. JS全选功能代码优化

    原文:JS全选功能代码优化 JS全选功能代码优化 最近在看javascript MVC那本书,也感觉到自己写的代码也并不优雅,所以一直在想 用另一种模式来编写JS代码,所以针对之前的简单的JS全选功能 ...

  8. S全选功能代码

    JS全选功能代码优化 2014-06-26 00:00 by 龙恩0707, 470 阅读, 3 评论, 收藏, 编辑 JS全选功能代码优化 最近在看javascript MVC那本书,也感觉到自己写 ...

  9. Java Swing 如何实现记事本中“编辑”菜单下的 剪切,复制,粘贴,删除,全选 功能

    这篇文字将要学习以下知识点: 1.如何给JButton按钮添加鼠标点击事件监听器 #1.addMouseListener(MouseListener l)  给JButton添加一个鼠标点击监听器l ...

随机推荐

  1. MYSQL 优化器 源码解析

    http://www.unofficialmysqlguide.com/introduction.html https://dev.mysql.com/doc/refman/8.0/en/explai ...

  2. 一分钟内搭建全web的API接口神器json-server详解

    JSON-Server 是一个 Node 模块,运行 Express 服务器,你可以指定一个 json 文件作为 api 的数据源. 安装json-server npm install -g json ...

  3. Paxos 实现日志复制同步(Basic Paxos)

    Paxos 实现日志复制同步 本篇文章以 John Ousterhout(斯坦福大学教授) 和 Diego Ongaro(斯坦福大学获得博士学位,Raft算法发明人) 在 Youtube 上的讲解视频 ...

  4. hdoj:2084

    数塔 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submissi ...

  5. Mysql 5.7 安装 解压缩版 忘记密码

    [参考]Mysql 命令大全 [参考]MySQL 5.7.19 忘记密码 重置密码 配置文件my.ini示例 服务启动后停止 log配置 [参考]MySQL5.7.19 服务挂掉 自动关闭 mysql ...

  6. TCP断线重连

    struct sockaddr_in TempSadd; TempSadd.sin_family = AF_INET; TempSadd.sin_port = htons(m_ServerPort); ...

  7. javap的使用

    今天听的分享里在介绍String时,提到了javap,学习了好久的java,但是好像从来没有了解过这个工具. javap是JDK提供的一个命令行工具,javap能对给定的class文件提供的字节代码进 ...

  8. 鼠标交互插件threex.domevents介绍

    threex.domevents是一个three.js的扩展库,支持3D场景的交互.和我们操作DOM树的事件相似,名称都是一样的.所以使用起来非常方便.另外他也提供了连接操作.单击网格可实现跳转功能. ...

  9. 转 .NET4.5之初识async与await

    来自:http://www.cnblogs.com/lekko/archive/2013/03/05/2944282.html 本人是从.NET4.0刚出的时候接触的.NET环境,所以学的东西就是4. ...

  10. 写文件的工具类,输出有格式的文件(txt、json/csv)

    import java.io.BufferedWriter; import java.io.File; import java.io.FileOutputStream; import java.io. ...