<!--html-->

<table class="table1">
<thead>
<tr>
<th> <input id="flag" type="checkbox" ng-model="select_all" ng-change="selectAll()"> </th>
<th>合同编号</th>
<th>合同名称</th>
<th>分配公司</th>
<th>更新时间</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="list in lists">
<td> <input type="checkbox" ng-model="list.checked" ng-change="selectOne()"> </td>
<td>{{list.contractnum}}</td>
<td>{{list.template.name}}</td>
<td>{{list.office.name}}</td>
<td>{{list.updateDate}}</td>
</tr>
</tbody>
</table>

<!--js-->

$scope.checked = [];//用来存放选中项的id
$scope.select_all = “”;
$scope.list = {
checked: “”
}

//全选
$scope.selectAll = function() {
if($scope.select_all) {
$scope.checked = [];
angular.forEach($scope.lists, function(i) {
i.checked = true;
$scope.checked.push(i.id);
})
} else {
angular.forEach($scope.lists, function(i) {
i.checked = false;
$scope.checked = [];
})
}
};

//单选
$scope.selectOne = function() {
angular.forEach($scope.lists, function(i) {
var index = $scope.checked.indexOf(i.id);
if(i.checked && index === -1) {
$scope.checked.push(i.id);
} else if(!i.checked && index !== -1) {
$scope.checked.splice(index, 1);
};
})

if($scope.lists.length === $scope.checked.length) {
$scope.select_all = true;
} else {
$scope.select_all = false;
}
}

转载于:https://www.cnblogs.com/Chen-Jian/p/8269211.html

全选、取消全选、单选相关推荐

  1. jquery全选/取消全选(反选)/单选操作

    使用jQuery实现一组checkbox全选/取消全选,代码很简洁. jquery版本:2.0 先看看HTML代码,很简单的操作框 </head> <body><div& ...

  2. jQuery 表单应用:全选/取消全选,表单验证,网页选项卡切换

    应用一:单行文本框应用 需要用到的 API focus([[data],fn])   --> 当元素获得焦点时,触发 focus 事件 blur([[data],fn])     -->  ...

  3. 表单全选取消全选案例

    表单全选取消全选案例 要求: 点击上面全选复选框 , 下面所有的复选框都选中(全选) 再次点击全选复选框 , 下面所有的复选框都不选中(取消全选) 如果下面复选框全部选中 , 上面全选按钮自动选中 如 ...

  4. 实现全选/取消全选功能

    这里是使用jquery为前提: 方法一: /*** 绑定全选/取消全选* @param checkAll 全选复选框* @param checkOne 单个复选框*/ function onCheck ...

  5. Android 切换全屏,取消全屏

    切换全屏,取消全屏 /*** 切换全屏,取消全屏** @param isChecked*/ private void switchFullScreen(boolean isChecked) {if ( ...

  6. element-ui tree 点击章节节点勾选/取消勾选

    element-ui tree 点击章节节点勾选/取消勾选 遇到一个需求,要求点击tree组件的章节时(不是点击checkBox),要进行节点勾选/取消勾选操作: 原本想的方案非常复杂,涉及到遍历父子 ...

  7. DataGrid 的 全选/取消全选 控制(CheckBox)

    DataGrid控件: <Columns>         <asp:TemplateColumn>          <HeaderStyle Width=" ...

  8. 【小白学前端】JS案例:表单全选取消全选

    要求: 1.点击全选按钮,可以选中所有产品前的选择框: 2.再点击一次,取消全选 3.每个产品可以单独选中取消 4.每个产品都选中时,全选框自动选中 5.取消一个产品的选择时,全选框自动取消 HTML ...

  9. QAbstractItemView子类如:QTreeView、QTableView等子项单元格复选框勾选/取消勾选功能实现

    1.前言 本博文所说的技术点适用于同时满足下面条件的所有QAbstractItemView视图类的子类: 模型类从 QAbstractItemModel派生. 代理类从QStyledItemDeleg ...

  10. vue 点击浏览器全屏取消全屏

    <template><div><!-- 全屏 --><img @click="fullscreenToggel" v-if="f ...

最新文章

  1. jQuery插件thickbox在ie下垂直居中问题
  2. 利用SoapUI 测试web service的方法介绍
  3. 那些文献阅读能力爆表的科研学子,都在偷偷做这件事……
  4. StringBuffer类的功能
  5. 【java】JApplet类相关方法的使用
  6. delphi中单独编译pas生成dcu文件
  7. 54.用环信实现聊天功能
  8. redis tutorail
  9. python:TypeError: ‘dict_keys‘ object does not support indexing
  10. 计算机信息系统发生安全事故,网络安全事故报告制度
  11. 【exp-linux】用aplay直接播放音频文件(mp3,wav)
  12. BUCT2021年ACM竞赛班训练(四)全题解(0x3f3f3f3f)
  13. 双十一,站在巨人的肩膀上囤最优秀的编程书
  14. Linux版本查看及PS1配置
  15. SublimeText3和EverEdit 的一些使用感受
  16. Node如何去除短视频水印?
  17. pyvisa.errors.VisaIOError: VI_ERROR_TMO (-1073807339): Timeout expired before operation completed
  18. 机器学习(三)——梯度下降
  19. @Autowried注入方式
  20. 双耳节拍 枕头_枕头2015年报告

热门文章

  1. 区块链的本质是什么?写给区块链的未来十年
  2. DEP机制的保护原理
  3. 疯狂连连看之开发游戏界面组件
  4. 一本专门解决网站可用性和易用性问题的实用书籍
  5. htcvr设备计算机配置,HTC Vive电脑配置要求多高?享受VR虚拟现实还要一台好电脑!...
  6. 蚁群算法路径规划_环境感知与规划专题(十)——基于采样的路径规划算法(二)...
  7. python皮卡丘编程代码_儿童Python代码编程库Pygame Zero介绍
  8. java 对象与引用_Java --对象引用与对象的区别
  9. 7-28 求矩阵的局部极大值 (15 分)
  10. 7-1 计算物体自由下落的距离 (5 分)