源代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></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)" ng-model="xg" />
<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){
if (confirm("是否刪除"+$scope.user[$index].name)) {
$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;
//回顯
var name =$scope.user[$index].name
var age =$scope.user[$index].age
var addr =$scope.user[$index].addr
$scope.t_name = name
$scope.t_age = age
$scope.t_addr = addr
//下標賦值給修改的model
$scope.xg = $index
}
//實現修改
$scope.add = function(){
//新建數組
var newUser ={
"name":$scope.t_name,
"age":$scope.t_age,
"addr":$scope.t_addr,
"date":new Date().getTime(),
"flag":false
}
//替換掉原先的
$scope.user.splice($scope.xg,1,newUser)
}
})
</script>
</body>
</html>