先要完成框架的导入
<html>
<head>
<meta charset="utf-8" />
<title>月考</title>
<!--
导入外部js、css
-->
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<style type="text/css">
fieldset {
padding: .35em .625em .75em;
margin: 0 2px;
border: 1px solid silver
}
legend {
padding: .5em;
border: 0;
width: auto
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
姓名查询条件：<input type="text" id="name" />
<select id="paixu" ng-options="x for x in orders" ng-model="selected" ng-init="selected=orders[0]" ng-change="change()">
</select>
<br> 用户列表
<br>
<table border="1px" cellspacing="0px" cellpadding="0px" class="table-striped table-hover">
<tr style="background: #999999;">
<td><input type="checkbox" id="quan" ng-click="quan()" /></td>
<td>姓名</td>
<td>年龄</td>
<td>拼音</td>
<td>职位</td>
<td>操作</td>
</tr>
<tr ng-repeat="person in persons">
<td><input type="checkbox" class="myCb" /></td>
<td>{{person.name}}</td>
<td>{{person.age}}</td>
<td>{{person.pinyin}}</td>
<td>{{person.zhiwei}}</td>
<td><a href="#" ng-click="dele($index)">删除</a></td>
</tr>
</table>
<input type="button" id="piliang" value="批量删除" ng-click="deleAll()" />
<input type="button" id="cha" value="查询" ng-click="cha()" />
<input type="button" id="add" value="添加用户" ng-click="show()" />
<form id="f">
<fieldset id="">
<legend>添加用户信息</legend>
姓名:<input type="text" name="name1" id="name1" /><br> 年龄:
<input type="text" name="age" id="age" /><br> 拼音:
<input type="text" name="pinyin" id="pinyin" /><br> 职位:
<input type="text" name="zhiwei" id="zhiwei" /><br>
<input type="button" value="保存" ng-click="save()" />
</fieldset>
</form>
<!--
逻辑代码
-->
<script type="text/javascript">
//默认下面添加页面隐藏
$("#f").hide();
var m = angular.module("myApp", []);
m.controller("myCtrl", function($scope) {
//初始化数据
$scope.persons = [{
"name": "张三",
"age": 20,
"pinyin": "zhangsan",
"zhiwei": "总经理"
}, {
"name": "李四",
"age": 25,
"pinyin": "lisi",
"zhiwei": "副经理"
}, {
"name": "王五",
"age": 22,
"pinyin": "wangwu",
"zhiwei": "工程师"
}];
//----------查询-----------
$scope.cha = function() {
//取值
var name = $("#name").val();
// alert(name)
//判断
if (name == "") {
alert("请输入姓名");
return;
}
//敏感词
if (name.indexOf("奥") != -1) {
alert("有敏感词");
return;
}
var newPersons = [];
//是否含有
for (var i = 0; i < $scope.persons.length; i++) {
var p = $scope.persons[i];
if (p.name == name) {
newPersons.push(p);
}
}
//之后判断新的数组是否是为空
if (newPersons.length == 0) {
alert("没有匹配项");
return;
}
$scope.persons = newPersons;
}
//---------查询结束-------
//初始化下拉
$scope.orders = ["按年龄正序排列", "按年龄倒序排列"];
//change事件
$scope.change = function() {
var pai = $("#paixu").val();
alert("dd" + pai)
if (pai == "string:按年龄正序排列") {
$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 = function() {
$("#f").show(1000);
}
//save
$scope.save = function() {
//验证年龄
var age = $("#age").val();
var b = isNaN(age);
if (b == true) { //如果不是一个数字就是 true
alert("年龄格式不正确")
return
}
//添加
var name12 = $("#name1").val();
var age = $("#age").val();
var pinyin = $("#pinyin").val();
var zhiwei = $("#zhiwei").val();
var pe = {
"name": name12,
"age": age,
"pinyin": pinyin,
"zhiwei": zhiwei
}; //创建ｐｅｒｓｏｎ对象
$scope.persons.push(pe);
//消失
$("#f").hide();
}
//删除
$scope.dele = function($index) {
var c = confirm("是否确认删除？");
if (c == true) {
$scope.persons.splice($index, 1);
}
}
//批量删除
$scope.deleAll = 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 tr = cb.parentNode.parentNode;
tr.remove();
}
}
}
var flag = false;
$scope.quan = 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;
}
}
})
</script>
</body>
</html>