<html>
<script type="text/javascript" src="js/angular.min.js"></script>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
* {
margin: 0px auto;
padding: 0px;
}
#div1 {
width: 800px;
height: 500px;
background-color: pink;
}
#div2 {
margin-left: 165px;
}
table {
width: 515px;
margin-top: 20px;
}
#fieldset1 {
width: 515px;
margin-top: 20px;
}
#div3 {
margin-left: 150px;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myController">
<div id="div1">
<h3>管理信息</h3>
<div id="div2">
<input type="button" class="btn" value="批量删除" ng-click="deleteAll()" />
用户名<input type="text" ng-model="name" ng-keydown="queryByName($event)" />
<select ng-model="age" ng-init="age = ages[0]" ng-change="age1()">
<option ng-repeat="x in ages">{{x}}</option>
</select>
<input type="button" value="添加" ng-click="addu()" />
</div>
<table border="1px" cellspacing="0px" cellpadding="0px">
<tr>
<th><input type="checkbox" ng-model="check1" ng-click="quanxuan()" /></th>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
<th>录入日期</th>
<th>操作</th>
</tr>
<tr ng-repeat="user in users" align="center">
<td><input type="checkbox" ng-click="xuanzhong($index)" /></td>
<td>{{user.uname}}</td>
<td>{{user.uage}}</td>
<td>{{user.ucity}}</td>
<td>{{user.utime|date:"yyyy-MM-dd"}}</td>
<td><input type="button" value="修改" ng-click="update($index)" /><input type="button" value="删除" ng-click="delete($index)" /></td>
</tr>
</table>
<fieldset id="fieldset1" ng-if="a">
<legend>用户信息</legend>
<div id="div3">
姓名<input type="text" id="addName" ng-model="addName" value="{{uu}}" /><br /> 年龄
<input type="text" id="addAge" ng-model="addAge" /><br /> 城市
<input type="text" id="addCity" ng-model="addCity" /><br />
<input type="button" value="OK" ng-model="uid" ng-click="addUser()" />
</div>
</fieldset>
</div>
</body>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myController", function($scope) {
var f = true;
//下拉列表数据
$scope.ages = ["以年龄正序", "以年龄倒序"];
//表格数据
var date = new Date();
var arr = [{
"flag1": false,
"uname": "张三",
"uage": 20,
"ucity": "北京",
"utime": date
}, {
"flag1": false,
"uname": "李四",
"uage": 22,
"ucity": "山西",
"utime": date
}, {
"flag1": false,
"uname": "王五",
"uage": 18,
"ucity": "天津",
"utime": date
}, {
"flag1": false,
"uname": "赵六",
"uage": 26,
"ucity": "河北",
"utime": date
}];
//初始化数据
$scope.users = arr;
//模糊查询
$scope.queryByName = function($event) {
var newArr = [];
var key = $event.keyCode;
if(key == 13) {
for(var i = 0; i < arr.length; i++) {
if(arr[i].uname == $scope.name) {
newArr.push(arr[i]);
}
}
$scope.users = newArr;
}
}
//按照年龄大小排序
$scope.age1 = function() {
var age = $scope.age;
if(age == "以年龄正序") {
arr.sort(function(a, b) {
return a.uage - b.uage;
})
} else {
arr.sort(function(a, b) {
return b.uage - a.uage;
})
}
$scope.users = arr;
}
//实现单行删除
$scope.delete = function($index) {
arr.splice($index, 1);
$scope.users = arr;
}
//实现批量删除
$scope.deleteAll = function() {
for(var i = arr.length - 1; i >= 0; i--) {
var user = arr[i];
var check = user.flag1;
if(check) {
arr.splice(i, 1);
}
}
$scope.users = arr;
}
//改变选中多选框
$scope.xuanzhong = function($index) {
arr[$index].flag1 = !arr[$index].flag1;
$scope.users = arr;
}
//回显用户信息
$scope.update = function($index) {
f = false;//定义一个修改的标识
$scope.a = true;
var uname = arr[$index].uname;
$scope.addName = uname;
var uage = arr[$index].uage;
$scope.addAge = uage;
var ucity = arr[$index].ucity;
$scope.addCity = ucity;
$scope.uid = $index;
}
$scope.addu = function() {
f = true;//定义一个增加的标识
$scope.a = true;
}
$scope.addUser = function() {//用一个ok按钮实现增加和修改操作
if(f) {//添加用户信息
var user = {
"uname": $("#addName").val(),
"uage": $("#addAge").val(),
"ucity": $("#addCity").val(),
"utime": date
};
arr.push(user);
$scope.users = arr;
$scope.a = false;
} else {//修改用户信息
var user = {
"uname": $("#addName").val(),
"uage": $("#addAge").val(),
"ucity": $("#addCity").val(),
"utime": date
};
arr.splice($scope.uid,1,user)
$scope.users = arr;
}
}
})
</script>
</html>
478
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
