核心提示：angular增删改查实现代码!DOCTYPE htmlhtml head meta charset=utf-8 / title周考练习/title script type=text/ src=...
angular增删改查实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>周考练习</title>
<script type="text/javascript" src="js/angular.js" ></script>
<style type="text/css">
tbody tr:nth-child(even){
background-color: red;
}
tbody tr:nth-child(odd){
background-color: aquamarine;
}
</style>
<script>
var app=angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.shops=[{
id:1,
name:"张三",
age:21,
xb:"男",
tel:18611111111,
ah:"只爱学习"
},{
id:2,
name:"李四",
age:20,
xb:"男",
tel:18622222222,
ah:"独自学习"
},{
id:3,
name:"小花",
age:19,
xb:"女",
tel:18633333333,
ah:"听着歌学习"
},{
id:4,
name:"翠花",
age:18,
xb:"女",
tel:18644444444,
ah:"看书学习"
},{
id:5,
name:"小风",
age:28,
xb:"男",
tel:18655555555,
ah:"去图书馆看书"
},{
id:9,
name:"小风",
age:28,
xb:"男",
tel:18655555555,
ah:"去图书馆看书"
}
];
//根据姓名查找
$scope.cx="";
$scope.dcx=function(){
var flag=false;
for(index in $scope.shops){
if($scope.cx==$scope.shops[index].name){
flag=true;
}
}
if($scope.cx=="" || $scope.cx==null){
alert("搜索框不能为空");
}else if(flag){
alert("有该名称");
}else{
alert("对不起没有");
}
}
//删除
$scope.shan=function(name){
if(window.confirm("你确定删除"+name+"吗？")){
for(index in $scope.shops){
if(name == $scope.shops[index].name){
$scope.shops.splice(index,1);
}
}
}
}
//点击出现添加框
$scope.xian=false;
$scope.tan=function(){
$scope.xian=true;
}
//点击实现添加功能
$scope.newah="";
$scope.add=function(){
var flag1=false;
var flag2=false;
var flag3=false;
var flag4=false;
//姓名不能重复
for(index in $scope.shops){
if($scope.newname==$scope.shops[index].name){
var flag4=true;
}
}
if(flag4){
alert("姓名不能重复");
}else{
var flag1=true;
}
if(isNaN($scope.newage)){
alert("年龄必须是数字");
}else if($scope.newage >0){
var flag2=true;
}else{
alert("年龄必须大于0");
}
if($scope.newah=="" || $scope.newah==null){
alert("爱好不能为空");
}else{
var flag3=true;
}
if( flag1 &&flag2 && flag3){
var newuser={
id:$scope.newid,
name:$scope.newname,
age:$scope.newage,
xb:$scope.newxb,
tel:$scope.newtel,
ah:$scope.newah,
}
$scope.shops.push(newuser);
}
}
$scope.xs=function(){
$scope.xian=false;
}
//修改
$scope.updateShowFun = function(shop){
$scope.updateId = shop.id;
$scope.updateName = shop.name;
$scope.updateAge = shop.age;
$scope.updateSex = shop.xb;
$scope.updateTel = shop.tel;
$scope.updateHobby = shop.ah;
}
$scope.updateData = function(){
$scope.updateArr = [];
for (index in $scope.shops) {
if (parseInt($scope.updateId)==$scope.shops[index].id) {
$scope.shops[index].name = $scope.updateName;
$scope.shops[index].age = $scope.updateAge;
$scope.shops[index].xb = $scope.updateSex;
$scope.shops[index].tel = $scope.updateTel;
$scope.shops[index].ah = $scope.updateHobby;
}
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl" >
<center>
年龄排序：
<select ng-model="sel">
<option value="">*年龄排序*</option>
<option value="age">*年龄正序*</option>
<option value="-age">*年龄倒序*</option>
</select>
id排序：
<select ng-model="sele">
<option value="">*id排序*</option>
<option value="id">*id正序*</option>
<option value="-id">*id倒序*</option>
</select>
姓名：<input type="text" ng-model="cx"/>
<button ng-click="dcx()">按照名字查询</button>
<button ng-click="tan()">添加新用户</button>
<table border="1"spellcheck="0" cellspacing="0" style="width: 800px">
<thead>
<tr>
<th>id</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>联系方式</th>
<th>爱好</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="shop in shops | orderBy:sel |orderBy:sele | filter:{name:cx}">
<td align="center">{{shop.id}}</td>
<td align="center">{{shop.name}}</td>
<td align="center">{{shop.age}}</td>
<td align="center">{{shop.xb}}</td>
<td align="center">{{shop.tel}}</td>
<td align="center">{{shop.ah}}</td>
<td align="center">
<button ng-click="shan(shop.name)">删除</button>
<button ng-click="updateShowFun(shop)">修改</button>
</td>
</tr>
</tbody>
</table><br><br>
</center>
<center>
<p ng-show="xian">
<form style="border: 1px solid black;width: 500px;">
<h3>添加用户</h3>
id:<input type="text" ng-model="newid"/><br>
姓名:<input type="text" ng-model="newname"/><br>
年龄:<input type="text" ng-model="newage"/><br>
性别:<select ng-model="newxb"><br>
<option value="">请选择</option>
<option value="男">男</option>
<option value="女">女</option>
</select><br>
联系方式:<input type="text" ng-model="newtel"/><br>
爱好:<textarea ng-model="newah"></textarea><br>
<button ng-click="add()">添加</button>
<!--<button ng-click="xs()">清空</button> -->
<input type="reset" name="clase" value="清空" ng-click="xs()"/>
</form>
</p>
<form style="border: 1px solid black; width: 600px;" >
<h3>修改用户</h3>
id:<input type="text"placeholder="请输入新修改id" ng-model="updateId" disabled="disabled"/><br /><br />
姓名:<input type="text" placeholder="请输入新姓名" ng-model="updateName"/><br /><br />
年龄:<input type="text" placeholder="请输入新年龄" ng-model="updateAge"/><br /><br />
性别:<select ng-model="updateSex">
<option>请选择</option>
<option>男</option>
<option>女</option>
</select><br /><br />
联系方式:<input type="text"placeholder="请输入新修改联系方式" ng-model="updateTel"/><br /><br />
爱好:<textarea name="hehe" cols="30" rows="4" ng-model="updateHobby"></textarea><br /><br />
<input type="button" value="修改" ng-click="updateData()"/>
<input type="reset" value="清空" /><br />
</form>
</center>
</body>
</html>
