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. CentOS 6.5 x64下查看服务版本

    1.查看服务是否是64位 [root@Yimmei ~]# getconf LONG_BIT 642.查看服务器版本信息 [root@Yimmei ~]# lsb_release -a LSB Ver ...

  2. ero-configuration Web Application Debugging with Xdebug and PhpStorm

    1. Install Xdebug To use Xdebug with PhpStorm for debugging PHP applications, you need to have a PHP ...

  3. ubuntu下同时安装anaconda2与anaconda3,并分别安装与之对应的软件

    1.安装anaconda2 参考网址:https://www.cnblogs.com/chamie/p/8876271.html 2.安装anaconda3 转载:https://blog.csdn. ...

  4. Spring-Cloud-Config学习笔记(一):使用本地存储

    简介 Spring Cloud Config为分布式系统中的外部配置提供服务器和客户端支持.使用Config Server,您可以为所有环境中的应用程序管理其外部属性.它非常适合spring应用,也可 ...

  5. 【XGBOOST】

    https://www.cnblogs.com/wxquare/p/5541414.html

  6. Unity游戏推送技术

    https://www.cnblogs.com/wuzhang/p/wuzhang20150401.html https://www.cnblogs.com/yangwujun/p/5789969.h ...

  7. JS中常用的Math方法

    1.min()和max()方法 Math.min()用于确定一组数值中的最小值.Math.max()用于确定一组数值中的最大值. alert(Math.min(2,4,3,6,3,8,0,1,3)); ...

  8. Easy UI combogrid动态加载数据

    场景: datagrid的每一行允许编辑,一行中有一个字段,编辑时,提供下拉框选项,供选择. 下拉框选项有多个列.如下图所示:(点击红框内的下拉按钮,会弹出绿框内的内容) 要求: 每行弹出的下拉框内容 ...

  9. Rafy环境配置

    如果现在项目已经创建好啦,要使用Rafy框架进行存储,这里我简单的总结下配置的环境步骤: 一.添加引用Rafy的SDK,如下几个; 二.新建文件夹Entities 在此文件夹下创建rafy实体以及仓库 ...

  10. mysql关联表修改语句

    UPDATE tb_irms_trans_pip2optseg a,`tb_irms_trans_pip` b SET a.district=b.district WHERE a.prop_id=b. ...