AngularJs实现全选功能
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">
品牌首字母:<input ng-model="searchEntity.firstChar">
<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实现全选功能的更多相关文章
- AngularJS 的全选、反选实现
目录 AngularJS 的全选.反选实现 一.需求 二.思路 三.实现 AngularJS 的全选.反选实现 一.需求 要使用 AngularJS 实现 checkbox 的全选.反选. 其中所有项 ...
- js初学—实现checkbox全选功能
布局如下: <p ><input type="checkbox" id="che1"/>全选</p><div id=& ...
- C# winform中的datagridview控件标头加入checkbox,实现全选功能。
/// <summary> /// 给DataGridView添加全选 /// </summary> public class AddCheckBoxToDataGridVie ...
- jquery实现全选功能
主要是模拟一些网页中的表格实现全选功能. <form> 你爱好的运动是: <input type="checkbox" id="Check" ...
- Form - CHECKBOX全选功能
FORM BUILDER开发,遇到这样一个需求: 添加一个CHECKBOX完成全选功能,红框为新添加的CHECKBOX(如图示) Try to use APP_RECORD.FOR_ALL_RECOR ...
- Android ListView条目全选功能,不用checkbox实现!
大家好,翻了翻曾经的笔记,发现了一个我特别标记的功能,那就是ListView全选功能,顿时想起了我那个时候苦逼的生涯,因为我大学机械出身,大学毕业了都不知道什么叫代码,在58干了一段销售.实在是干不下 ...
- JS全选功能代码优化
原文:JS全选功能代码优化 JS全选功能代码优化 最近在看javascript MVC那本书,也感觉到自己写的代码也并不优雅,所以一直在想 用另一种模式来编写JS代码,所以针对之前的简单的JS全选功能 ...
- S全选功能代码
JS全选功能代码优化 2014-06-26 00:00 by 龙恩0707, 470 阅读, 3 评论, 收藏, 编辑 JS全选功能代码优化 最近在看javascript MVC那本书,也感觉到自己写 ...
- Java Swing 如何实现记事本中“编辑”菜单下的 剪切,复制,粘贴,删除,全选 功能
这篇文字将要学习以下知识点: 1.如何给JButton按钮添加鼠标点击事件监听器 #1.addMouseListener(MouseListener l) 给JButton添加一个鼠标点击监听器l ...
随机推荐
- Future、FutureTask实现原理浅析(源码解读)
前言 最近一直在看JUC下面的一些东西,发现很多东西都是以前用过,但是真是到原理层面自己还是很欠缺. 刚好趁这段时间不太忙,回来了便一点点学习总结. 前言 最近一直在看JUC下面的一些东西,发现很多东 ...
- TypeScript和JavaScript的一些小技巧记录
项目里使用到的技巧,记录一下,会持续更新. JS的技巧完全可以使用到TS上哦. JS 向下取整 Math.floor(4.5); 简写: var num = 4.5; ~~num; num <& ...
- word,excel,ppt,txt转换为 PDF
/// <summary> /// 将word文档转换成PDF格式 /// </summary> /// <param name="sourcePath&quo ...
- vs code 设置问题
现已取消 .vue 文件与 HTML 的默认关联,需要手动配置.vue 文件里不能使用div + Tab 键快速生成 html 代码 "emmet.syntaxProfiles" ...
- 【iCore4 双核心板_ARM】例程二十六:LWIP_MODBUS_TCP实验——电源监控
实验现象: 核心代码: int main(void) { system_clock.initialize(); led.initialize(); adc.initialize(); delay.in ...
- NO.2 安装配置
检测当前系统下的jdk安装情况: [root@Centos 桌面]# rpm -qa | grep java tzdata-java-2012j-1.el6.noarch java-1.7.0-ope ...
- Windows 使用 Gogs 搭建 Git 服务器(转)
Windows 使用 Gogs 搭建 Git 服务器 随便说两句 之前有使用 Gitblit 在Windows搭建Git服务器,用的也挺好的,可能安装起来略麻烦一点.现在全用 Gogs 在wind ...
- Android Studio中解决jar包重复依赖导致的代码编译错误
在原本的代码中已经使用了OKHTTP和rxjava,然后今天依赖retrofit的时候一直报错 Program type already present: okhttp3.internal.ws.Re ...
- PHP下载远程图片的3个方法
From: http://blog.csdn.net/iefreer/article/details/46930239 直接上代码 <?php function dlfile1($file_ur ...
- 离屏Canvas — 使用Web Worker提高你的Canvas运行速度
离屏Canvas — 使用Web Worker提高你的Canvas运行速度 原文链接: developers.google.com 现在因为有了离屏Canvas,你可以不用在你的主线程中绘制图像了! ...