信息管理

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>

<style>
.tab {
text-align: center;
margin-top: 20px;
}

.fie{
margin-top: 30px;
width: 250px;
}

.ok{
width: 60px;
margin-left: 80px;
}

.tr1:nth-of-type(odd){
background: #999999;
}
</style>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
<h2>管理信息</h2>
<input type="button" value="批量删除" ng-click="deleall()" />          用户名：

<input type="text" placeholder="按照用户名查询.." ng-model="g_name" ng-keydown="cha_name($event)" />

<select ng-change="chang()" ng-model="pai_age" ng-init="pai_age='--请选择--'">
<option>--请选择--</option>
<option ng-repeat="age in ages">{{age}}</option>
</select>

<input type="button" value="添加" ng-click="xianshi()" />

<table border="1px" cellspacing="0px" cellpadding="0px" width="500px" height="30px" class="tab">
<tr>
<td><input type="checkbox" ng-click="qx()" </td>
<td>姓名</td>
<td>年龄</td>
<td>城市</td>
<td>录入日期</td>
<td>操作</td>
</tr>
<tr ng-repeat="u in user" class="tr1">
<td><input type="checkbox" name="ckk" ng-click="ck($index)" </td>
<td>{{u.name}}</td>
<td>{{u.age}}</td>
<td>{{u.addr}}</td>
<td>{{u.date|date:"yyyy-MM-dd hh:mm:ss"}}</td>
<td><input type="button" value="修改" ng-click="gai($index)" />
<input type="button" value="删除" ng-click="shan($index)" />

</td>
</tr>
</table>

<fieldset class="fie" ng-show="ns">
<legend>用户信息</legend>
姓名：<input type="text" ng-model="t_name" /><br />
年龄：<input type="text" ng-model="t_age" /><br />
城市：<input type="text" ng-model="t_addr" /><br />
<input type="button" value="OK" ng-click="add()" class="ok" />

</fieldset>

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

//初始数据
$scope.user = [{

"name":"郭哥",
"age":18,
"addr":"邯郸",
"date":new Date().getTime(),
"flag":false

}]

//添加的方法
$scope.add = function(){

//创建对象
var obj = {
"name":$scope.t_name,
"age":$scope.t_age,
"addr":$scope.t_addr,
"date":new Date().getTime(),
"flag":false
}

//添加到数组
$scope.user.push(obj);
}

//删除一行的方法
$scope.shan = function($index){

$scope.user.splice($index,1)
}

//批量删除
//先修改每行ckekbox的状态
$scope.ck = function ($index){
$scope.user[$index].flag=!$scope.user[$index].flag;
}

//批量删除
$scope.deleall = function(){
//反着遍历
for (var i = $scope.user.length-1;i>=0;i--) {
//如果是选择状态
if ($scope.user[i].flag) {

$scope.user.splice(i,1);
}
}
}

//回车按照用户名查询
$scope.cha_name = function($event){

//创建新数组
var newArr = [];
//获取回车的参数值
var key = $event.keyCode;

if (key==13) {

for (var i = 0; i < $scope.user.length; i++) {
if ($scope.user[i].name.indexOf($scope.g_name)!=-1) {

//添加到新数组
newArr.push($scope.user[i])
}
}

//从新给数组赋值
$scope.user = newArr;
}
}

var qqx = true;
$scope.qx = function(){
//获取属性
var ck = $("input[name=ckk]")
for (var i = 0; i < ck.length; i++) {
ck[i].checked=qqx;

//给数组的每个ck赋值
$scope.user[i].flag=qqx
}

qqx=!qqx
}

//按照年龄倒序正序
//年龄排序数组
$scope.ages = ["按年龄倒序", "按年龄正序"]

$scope.chang = function(){

//获取排序模式
var px = $scope.pai_age;

if (px=="按年龄正序") {

$scope.user.sort(function(a,b){

return a.age -b.age
})
}else{

$scope.user.sort(function(a,b){

return b.age - a.age
})
}
}

//显示添加框
$scope.xianshi = function(){
$scope.ns=true;
}

//修改的方法
$scope.gai = function($index){
$scope.ns=true;

}

})
</script>
</body>

</html>

猜你喜欢