排序+删除+全选+反选+隔行变色

最新推荐文章于 2018-07-13 14:45:14 发布

原创最新推荐文章于 2018-07-13 14:45:14 发布 · 380 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个使用AngularJS实现的用户信息管理系统，该系统具备添加、查询、排序、删除等功能，并详细展示了如何通过AngularJS指令和控制器来组织这些功能。

<!DOCTYPE html>

<html>

<head>
<meta charset="utf-8" />
<title></title>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="js/bootstrap.min.css" />
</head>

<body ng-app="myApp" ng-controller="myCtrl" style="text-align: center;">
<h3 style="text-align: center;">用户信息表</h3><br />
<input type="text" placeholder="用户名查询" ng-model="search" />
<select ng-model="xuanxiang" ng-change="change()" ng-options="x for x in orders" ng-init="xuanxiang=orders[0]">

</select>
<button ng-click="deleAll()">全部删除</button>
<button ng-click="dele()" id="piliang">批量删除</button>
<button ng-click="checkAll()">全选</button>
<button ng-click="fan()">反选</button>
<table border=" 1 " cellspacing="1 " cellpadding="1 " width="400px " style="margin-left: 400px;margin-top: 50px; " class="table-striped table-hover">
<tr>
<td><input type="checkbox"></td>
<td>用户名</td>
<td>密码</td>
<td>年龄</td>
<td>性别</td>
<td>操作</td>
</tr>
<tbody>
<tr ng-repeat="p in persons|filter:search2">
<td><input type="checkbox" class="mycb" /></td>
<td>{{p.name}}</td>
<td>{{p.pwd}}</td>
<td>{{p.age|currency:'￥'}}</td>
<td>{{p.sex}}</td>
<td><button ng-click="remo($index)">删除</button></td>
</tr>
</tbody>
</table>
<button ng-click="add()">添加用户</button>
<table style="margin-left: 500px;margin-top: 100px;" ng-show="show">
<tr>
<th>用户名：</th>
<td><input ng-model="name" type="text" id="name1" required placeholder="请输入用户名" /></td>
</tr>
<tr>
<th>密　码：</th>
<td><input ng-model="pwd" placeholder="请输入密码" /></td>
</tr>
<tr>
<th>年　龄：</th>
<td><input ng-model="age" placeholder="请输入年龄" /></td>
</tr>
<tr>
<th>性　别：</th>
<td><input ng-model="sex" placeholder="请输入性别" /></td>
</tr>
<tr align="center">
<td colspan="2"><input type="button" ng-click="push()" value="提交" /></td>
</tr>
</table>

<script type="text/javascript">
var mo = angular.module("myApp", []);
mo.controller("myCtrl", function($scope) {

$scope.persons = [{
"name": "张三",
"pwd": "123",
"age": 20,
"sex": "男"
}, {
"name": "李四",
"pwd": "456",
"age": 33,
"sex": "女"
}, {
"name": "王五",
"pwd": "789",
"age": 42,
"sex": "男"
}];

//排序
$scope.orders = ["按年龄正序", "按年龄倒序"];
$scope.change = function() {
var xz = $scope.xuanxiang;
if (xz == "按年龄正序") {
$scope.persons.sort(function(a, b) {

if (a.age > b.age) {
return 1;
} else if (a.age < b.age) {
return -1;
}
return 0;
});
} else {
$scope.persons.sort(function(a, b) {

if (a.age > b.age) {
return -1;
} else if (a.age < b.age) {
return 1;
}
return 0;
});
}
}
//添加
$scope.show = false;
$scope.add = function() {
$scope.show = true;
}
$scope.push = function() {

var nam = $("#name1").val();
if (nam == "") {
alert("姓名不能为空");
return;
}
$scope.persons.push({
name: $scope.name,
age: $scope.age,
pwd: $scope.pwd,
});
$scope.show = false;

}
// 查询
$scope.search = "";
$scope.search2 = "";
$scope.$watch("search", function(value) {
if (value.indexOf("枪") != -1) {
alert("有敏感词");
$scope.search = "";

return;
} else {
$scope.search2 = $scope.search;
}
})

//删除
$scope.remo = function($index) {

if (confirm("确定要删除吗")) {

$scope.persons.splice($index, 1);
}
}

//全选
var flag = false;
$scope.checkAll = function() {
var cbs = $("input[type=checkbox]");
if (flag == false) {

for (var i = 0; i < cbs.length; i++) {
var cb = cbs[i];
cb.checked = true;
}
flag = true;
} else {
for (var i = 0; i < cbs.length; i++) {
var cb = cbs[i];
cb.checked = false;
}
flag = false;
}
}
//反选
$scope.fan = function() {
var cbs = $("input[type=checkbox]");
//遍历
for (var i = 1; i < cbs.length; i++) {
var cb = cbs[i];
//将所有的复选框置为true
cb.checked = !cb.checked;
}
}
//批量删除
$scope.dele = function() {
var b = confirm("确定要删除吗?");
if (b == true) {
var cbs = $("input[type=checkbox][class=mycb]:checked");

for (var i = 0; i < cbs.length; i++) {
var cb = cbs[i];
var t = cb.parentNode.parentNode;
t.remove();
}
}
}
//全部删除
$scope.deleAll = function() {
if (confirm("确定要全部删除吗?")) {
$scope.persons.splice($scope.persons);
}

}

});
</script>
</body>

</html>