angular实现表格的全选、单选、部分删除以及全部删除
昨天自己写了一小段js，在全选的时候有点儿小坑，然后，整理了一下。今天把它贴出来，希望以后还记得。
大家也可以去github上查看或下载：https://github.com/dreamITGirl/projectStudy/tree/master/html
我在用angular实现表格的全选时，是给了一个标记--就是一个空数组，每次有个别项选中，我都会push一个数字，当有选项从选中状态到未选中变化时，我就让该数组弹出一个数字。这样就可以实现了。我实现的个别删除和全部删除是从页面删除的，并没有操作json对象，因此，在真正项目中使用的话，还需要加上ajax请求，同时删除服务器上的数据。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格的全选，删除</title>
<link rel="stylesheet" href="../css/bootstrap.min.css"/>
<style type="text/css">
table th {
text-align: center;
} input[type="checkbox"] {
width: 20px;
height: 20px;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<table border="" cellspacing="" cellpadding="" class="table" style="text-align: center;">
<tr>
<th><input type="checkbox" ng-model="selectedAll" ng-click="selectAll()"/></th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>民族</th>
<th ng-click="delAll($event)" style="cursor:pointer">全部删除</th>
</tr>
<tr ng-repeat="item in items">
<td><input type="checkbox" ng-model="item.states" ng-change="selectOne(item.states)"/></td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.sex}}</td>
<td>{{item.national}}</td>
<td ng-click="del($event)" style="cursor: pointer">删除</td>
</tr>
</table>
<script type="text/javascript" src="../js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="../js/angular.js"></script>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope, $http) {
//设置默认为表格非全选
$scope.selectedAll = false;
$scope.state = [];
$http({
method: "GET",
url: "http://localhost:63342/projectStudy/json/selected.json"
}).then(function successCallback(response) {
console.log(response);
$scope.items = response.data.dataList;
}, function errorCallback(response) {
console.log(response)
});
//全选
$scope.selectAll = function () {
for (var i = 0; i < $scope.items.length; i++) {
if ($scope.selectedAll) {
$scope.items[i].states = true;
$scope.state = [1, 1, 1, 1, 1]; } else {
$scope.state = [];
$scope.items[i].states = false;
}
console.log($scope.state)
}
};
//单选
$scope.selectOne = function (m) { if (m == true) {
$scope.state.push(1);
console.log($scope.state.length);
if ($scope.state.length == $scope.items.length) {
$scope.selectedAll = true
} else {
$scope.selectedAll = false;
}
console.log($scope.state);
} else {
console.log(m);
$scope.state.pop(1);
$scope.changed(m);
}
};
$scope.changed = function (a) {
if (a == true) {
$scope.state.push(1); console.log($scope.state.length);
if ($scope.state.length == $scope.items.length) {
$scope.selectedAll = true
} else {
$scope.selectedAll = false;
}
} else {
console.log(a);
$scope.selectedAll = false;
}
}
//删除单个选项
$scope.del = function (event) {
//样式的删除
console.log($(event.target).parent().html());
$(event.target).parent().remove();
}
//删除全部选项
$scope.delAll = function (event) {
if ($scope.selectedAll == true) {
// console.log( $(event.target).siblings().html())
$(event.target).parent().siblings().remove();
$scope.selectedAll = false;
} else {
alert('尚未选择要删除的项')
}
} })
</script>
</body>
</html>
angular实现表格的全选、单选、部分删除以及全部删除的更多相关文章
- JS中表格的全选和删除要注意的问题
在项目开发中,由于刚刚开始做项目,我对js还不是很精通,所以在用js对表格的全选和删除中遇到了不少问题,后来通过查找资料解决了,之后总结了一下关于js表格的全选和删除出现的一些问题,希望能帮助到大家. ...
- vue开发购物车，解决全选单选问题
实现全选单选,在vue中无法通过this获取input中的checkbox的checked属性,但是可以通过vue对input的特殊方式v-model来实现对应数据的绑定,同样也可以通过这种方式实现购 ...
- ElementUi 表格取消全选框，用文字表示
Echarts ElementUi 表格取消全选框,用文字表示 1.先看看实现的图 一. 添加添加复选框列 <el-table v-loading="zongShipLoading&q ...
- DataTable添加checkbox实现表格数据全选，单选（点选）
Datatables是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能. 分页,即时搜索和排序 几乎支持任何数据源:DOM, javascript, Ajax ...
- 邮箱性质--全选单选的操作和传值 用属性的name传值
封装类 using System; using System.Collections.Generic; using System.Web; /// <summary> /// Ha 的摘要 ...
- vue-实现全选单选
在获取列表页面数据时,通过forEach遍历存储数据的对象,给对象中添加一个selected变量,值为布尔值. 点击全选时,通过遍历将对象中selected的布尔值改变 点击单选时,被点中的通过筛选加 ...
- JQuery实现表格的全选和反选，以及分页勾选保存（laypage插件分页的使用）
需求: 1.全选与取消全选 2.单个勾选,点击表格单元格中checkbox勾选,也可以在点击行勾选,便与用户操作 3.分页勾选保存 4.固定表头 功能一: 说明:操作全选按钮的同时,遍历每一个tr中的 ...
- checkbox 全选 单选的使用
绑定数据 if (!IsPostBack) { using (UsersDataContext con = new UsersDataContext()) { Repeater1.DataSource ...
- element-ui 里面el-checkbox多选框，实现全选单选
data里面定义了 data:[], actionids:[],//选择的那个actionid num1:0,//没选择的计数 num2:0,//选中的计数 ...
随机推荐
- Swift 烧脑体操（四） - map 和 flatMap
前言 Swift 其实比 Objective-C 复杂很多,相对于出生于上世纪 80 年代的 Objective-C 来说,Swift 融入了大量新特性.这也使得我们学习掌握这门语言变得相对来说更加困 ...
- Java多线程系列 基础篇03 线程的优先级和守护线程
1. 线程优先级 现代操作系统中基本上使用时间分片的方式调度线程,通过设置线程优先级,使优先级高的线程获得时间片的次数多于优先级低的线程. 在java 线程中,通过一个整形变量prority来控制优先 ...
- mysql优化之 EXPLAIN（一）
数据库优化最常用的命令就是用explain查看一下写的sql是否用到了索引: 如: (root@localhost) [akapp]>explain select * from sc_activ ...
- [BZOJ 1095] [ZJOI 2007]Hide 捉迷藏
在BZ上连续MLE n次后,终于A了. 自己YY的动态点分写法,思路还是很清楚的,但是比较卡内存. 用到了MAP导致复杂度比其他的代码多了一个log,看来需要去借鉴一下别人怎么写的. updata i ...
- html5--1.10绝对路径和相对路径
html5--1.10绝对路径和相对路径 学习要点: 绝对路径和相对路径 1.绝对路径 需要指出链接资源的绝对位置,与你的HTML文档的位置无关: 1. 服务器中的位置:href="http ...
- PS 滤镜— —扇形warp
clc; clear all; close all; addpath('E:\PhotoShop Algortihm\Image Processing\PS Algorithm'); I=imread ...
- 关于ng-class中添加多个样式类的解决方案
想要达到ng-class的效果,有两种写法 1.class=“{{class}} class1 class2” 2.ng-class="{true: 'active', false: 'in ...
- 【Lintcode】036.Reverse Linked List II
题目: Reverse a linked list from position m to n. Given m, n satisfy the following condition: 1 ≤ m ≤ ...
- 洛谷 P4512 [模板] 多项式除法
题目:https://www.luogu.org/problemnew/show/P4512 看博客:https://www.cnblogs.com/owenyu/p/6724611.html htt ...
- Asp.Net 无法获取IIS拾取目录的解决办法[译]
Asp.Net 无法获取IIS拾取目录的解决办法 作者:Jason Doucette [MCP] 翻译:彭远志 原文地址:Fixing the cannot get IIS pickup direc ...