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. Navicat Premium 12破解方法

    来源网址:https://www.jianshu.com/p/42a33b0dda9c 1.按步骤安装Navicat Premium,如果没有可以去官网下载:http://www.navicat.co ...

  2. [druid]大数据挑战——如何使用Druid实现数据聚合

    -- 知道你为什么惧组件很多的一些开源软件? 因为缺乏阅读能力. 最近我接手了druid+kafka+elk一套等日志系统. 但是我对druid很陌生, 周旋了几天, 官网文档快速开始照着做了下. 看 ...

  3. vim粘贴和保存

  4. Delphi目录监控、目录监听

    资料地址: 1.https://www.cnblogs.com/studypanp/p/4890970.html 单元代码: (************************************ ...

  5. spring boot 配置注入

    spring boot配置注入有变量方式和类方式(参见:<spring boot 自定义配置属性的各种方式>),变量中又要注意静态变量的注入(参见:spring boot 给静态变量注入值 ...

  6. Angular4中路由Router类的跳转navigate

    最近一直在学习angular4,它确实比以前有了很大的变化和改进,好多地方也不是那么容易就能理解,好在官方的文档和例子是中文,对英文不太好的还是有很大帮助去学习. 官方地址:https://angul ...

  7. 24小时学通Linux内核之电源开和关时都发生了什么

    说实话感觉自己快写不下去了,其一是有些勉强跟不上来,其二是感觉自己越写越差,刚开始可能是新鲜感以及很多读者的鼓励,现在就是想快点完成自己制定的任务,不过总有几个读者给自己鼓励,很欣慰的事情,不多感慨了 ...

  8. A股滚动净利润增速最高排名

    最近2年(共8个季度)的滚动净利润都在增长,且平均增速超过10%. 计算举例:滚动净利润增速 = ((2018Q1 到 2018Q4的净利润之和) / (2017Q4 到 2018Q3的净利润之和) ...

  9. Python的循环导入问题

    循环导入的最好的解决方法是从架构上优化,即调整模块和模块成员变量的设计.一个好的原则是:可导出的成员变量,都不应该依赖于导入进来的成员变量. 但是在业务开发的过程中,总会遇到通过架构层面解决不了的导入 ...

  10. Web容器初始化过程

    一.SpringMVC启动过程 Spring的MVC是基于Servlet功能实现的,每个web工程中都有一个web.xml文件,web容器在启动的时候会加载这个配置文件,当一个web应用加载到web容 ...