本文主要和大家分享angularjs实现增删改查代码，希望能帮助到大家。
<span style="font-size:14px;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script type="text/javascript" src="libs/jquery-2.1.0.min.js"></script>
<style type="text/css">
* {
margin: 0px auto;
}
.p1 {
width: 800px;
}
table {
width: 800px;
margin-top: 10px;
}
input {
margin-top: 10px;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<p class="p1">
管理信息<br />
<button class="btn" ng-click="piliang1()" style="margin-left: 20px;">批量删除</button>
<span style="margin-left: 50px;"></span><input type="text" placeholder="按用户名查询" ng-model="uname" ng-keydown="inp_uname($event)" />
<select style="margin-left: 50px;" ng-model="paixu" ng-change="isPaixu()" ng-init="paixu='以年龄正序'">
<option>以年龄正序</option>
<option>以年龄倒序</option>
</select>
<button style="margin-left: 80px" ng-click="add()">添加</button>
<!--<input type="button" style="margin-left: 80px;" ng-click="tianjia()" value="添加"/>-->
<table border="1px" cellspacing="0px">
<tr>
<td><input type="checkbox" /></td>
<td>姓名</td>
<td>年龄</td>
<td>城市</td>
<td>录入日期</td>
<td>操作</td>
</tr>
<tr ng-repeat="u in unames | filter:uname">
<td><input type="checkbox" ng-click="xuan($index)" /></td>
<td>{{u.uname}}</td>
<td>{{u.age}}</td>
<td>{{u.city}}</td>
<td>{{u.riqi|date:"yyyy-MM-dd"}}</td>
<td><button ng-click="xiugai($index)">修改</button><button ng-click="shanchu($index)">删除</button></td>
</tr>
</table>
<fieldset style="text-align: center;" ng-show="xs">
<legend>用户信息</legend>
姓名<input type="text" ng-model="uname_xinxi" /><br />
年龄<input type="text" ng-model="age_xinxi" /><br />
城市<input type="text" ng-model="city_xinxi" /><br />
登录日期<input type="date" ng-model="riqi_xinxi" /><br />
<input type="button" value="OK" ng-click="ok()" ng-model="i" />
</fieldset>
</p>
<script type="text/javascript">
var mo = angular.module("myApp", []);
mo.controller("myCtrl", function($scope) {
//初始化数据
var arr = [{
"isChecked": false,
"uname": "张三",
"age": 25,
"city": "北京",
"riqi": new Date(231332).getTime()
}, {
"isChecked": false,
"uname": "李四",
"age": 34,
"city": "北京",
"riqi": new Date(6436654).getTime()
}, {
"isChecked": false,
"uname": "王五",
"age": 22,
"city": "上海",
"riqi": new Date(435435).getTime()
}];
var flag = true;
$scope.unames = arr;
//添加
$scope.add = function() {
flag = true;
$scope.xs = !$scope.xs;
};
//点击复选框改变选中状态
$scope.xuan = function($index) {
arr[$index].isChecked = !arr[$index].isChecked;
$scope.unames = arr;
}
//批量删除
$scope.piliang1 = function() {
//遍历
for (var i = arr.length - 1; i >= 0; i--) {
var c = arr[i].isChecked;
if (c) {
arr.splice(i, 1);
}
}
$scope.unames = arr;
}
//查询
$scope.inp_uname = function($event) {
var arr_temp = [];
var ketCode = $event.keyCode;
if (ketCode == 13) {
for (var i = 0; i < arr.length; i++) {
var n = arr[i].uname.toString();
if (n.indexOf($scope.uname) != -1) {
arr_temp.push(arr[i]);
}
}
$scope.unames = arr_temp;
}
}
//按年龄排序
$scope.isPaixu = function($index) {
var p = $scope.paixu;
if (p == "以年龄正序") {
arr.sort(function(a, b) {
return a.age - b.age;
});
} else if (p == "以年龄倒序") {
arr.sort(function(a, b) {
return b.age - a.age;
});
}
$scope.unames = arr;
}
//修改
$scope.xiugai = function($index) {
flag = false;
$scope.xs = true;
var name1 = $scope.unames[$index].uname;
var age1 = $scope.unames[$index].age;
var city1 = $scope.unames[$index].city;
var riqi1 = $scope.unames[$index].riqi; // alert(name1);
$scope.uname_xinxi = name1;
$scope.age_xinxi = age1;
$scope.city_xinxi = city1;
$scope.riqi_xinxi = riqi1;
$scope.i = $index;
console.log(name1+"--"+age1+"--"+city1+"--"+riqi1)
}
//点击ok修改数据
$scope.ok = function() {
if (flag) {
var obj = {
"uname": $scope.uname_xinxi,
"age": $scope.age_xinxi,
"city": $scope.city_xinxi,
"riqi": $scope.riqi_xinxi,
};
$scope.unames.push(obj);
$scope.xs = false;
} else {
var newperson = {
"ischecked": false,
"uname":$scope.uname_xinxi,
"age": $scope.age_xinxi,
"city": $scope.city_xinxi,
"riqi": $scope.riqi_xinxi,
};
arr.splice($scope.i, 1, newperson);
$scope.names = arr;
}
}
//删除
$scope.shanchu = function() {
//遍历
for (var i = arr.length - 1; i >= 0; i--) {
var d = arr[i];
}
arr.splice(d, 1);
}
})
</script>
</body>
</html></span>相关推荐：
Mfkiqpl旅行社旅游线路预订程序
下载
升级报告：增加动态新闻功能后台添加，删除，编辑，支持UBB代码，支持上传片及文件。 增加我要入团功能散客可以自由选择加入贵社最近要出发的团队。 增加线路置顶功能置顶后的线路永远显示在最前面。 增加同行报价功能管理员在后台添加同行用户，同行用户登录后可查看贵社线路对同行的报价。同行报价在添加线路中一并添加。（感谢网友拽哥提出修改意见） 增加更多线路显示的分页功能方便大型旅行社由于线路过多而引起的部分
