AngularJS操作表格的增删改查

来源：互联网发布：网络小贷与p2p的区别编辑：程序博客网时间：2024/05/23 12:57

源代码：

<!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>

阅读全文

0 0