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. 转 : 深入解析Java锁机制

    深入解析Java锁机制 https://mp.weixin.qq.com/s?__biz=MzU0OTE4MzYzMw%3D%3D&mid=2247485524&idx=1&s ...

  2. Android Glide 源码分析系列(待完成)

    参考:https://jekton.github.io/2018/06/08/glide-disk-cache/ 参考:https://jekton.github.io/2018/06/20/glid ...

  3. Mybatis(二) 全局配置文件详解

    这节来说说全局配置文件的东西,非常简单.看一遍就懂了. --WH 一.全部配置内容 SqlMapConfig.xml的配置内容和顺序如下,顺序不能乱.现在来对这些属性的意思一一进行讲解. 二.prop ...

  4. Gradle 离线 安装

    第一步:下载gradle zip 文件 第二步:打开文件夹,例如:C:\Users\Administrator.gradle\wrapper\dists\gradle-3.3-all\55gk2rcm ...

  5. js正则匹配html标签中的style样式和img标签

    <!DOCTYPE html> <html> <head> <title></title> </head> <body&g ...

  6. 性能测试工具--SIEGE安装及使用简介 siege压力测试

    官方网站http://www.joedog.org/ 概述 Siege是一个多线程http负载测试和基准测试工具.它有3种操作模式: 1) Regression (when invoked by bo ...

  7. golang字符串拼接

    四种拼接方案: 1,直接用 += 操作符, 直接将多个字符串拼接. 最直观的方法, 不过当数据量非常大时用这种拼接访求是非常低效的. 2,直接用 + 操作符,这个和+=其实一个意思了. 3,用字符串切 ...

  8. Oracle分析函数-keep(dense_rank first/last)

    select * from criss_sales where dept_id = 'D02' order by sale_date ; 此时有个新需求,希望查看部门 D02 内,销售记录时间最早,销 ...

  9. Android全面屏适配

    什么是全面屏 概念 很多人可能把全面屏跟曲面屏混淆,其实这是两个不同的概念. 一般手机的屏幕纵横比为16:9,如1080x1920.1440x2560等,其比值为1.777777……,全面屏手机出现之 ...

  10. struts表单域模型注入

    表单使用struts标签,表单中每一个字段都可以这样来赋值 类(action).成员变量 这个叫域模型注入 <s:form action="orders" method=&q ...