标签：
<!DOCTYPE html>
<html>
<head>
<title>测试</title>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div class="container" ng-app="myapp" ng-controller="mycontrl">
<table class="table">
<tr>
<td>编辑</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tr ng-repeat="person in person">
<td><button ng-click="changuser(person.id)">编辑</button></td>
<td ng-model="fname">{{person.name}}</td>
<td ng-model="fage">{{person.age}}</td>
<td ng-model="fsex">{{person.sex}}</td>
</tr>
</table>
<button ng-click="changuser(‘new‘)">新增用户</button>
<form name="message">
<h2 ng-show="myCheck">编辑信息</h2>
<h2 ng-show="!myCheck">新增用户</h2>
<p>姓名：<input type="text" ng-model="fname" required></p>
<p>年龄：<input type="number" ng-model="fage" required></p>
<p>性别：<input type="text" ng-model="fsex" required ></p>
<input type="submit" ng-click="add(id,fname,fage,fsex)">
</form>
</div>
<script type="text/javascript">
var app=angular.module(‘myapp‘,[]);
app.controller(‘mycontrl‘,function($scope){
$scope.person=[
{id:"0",name:"zhaoruobing",age:"17",sex:"girl"},
{id:"1",name:"jinguoqiang",age:"17",sex:"boy"},
{id:"2",name:"kongyanzhou",age:"17",sex:"boy"},
{id:"3",name:"lixiaowen",age:"18",sex:"girl"}
];
$scope.myCheck=false;
$scope.changuser=function(id){
if(id=="new"){
$scope.myCheck=false;
$scope.fname="";
$scope.fage="";
$scope.fsex="";
}
else{
$scope.myCheck=true;
$scope.id=id;
$scope.fname=$scope.person[id].name;
$scope.fage=parseInt($scope.person[id].age);
$scope.fsex=$scope.person[id].sex;
}
};
$scope.add=function(id,name,age,sex){
$scope.personmessage={
nname:name,
nage:age,
nsex:sex
};
if($scope.myCheck==false){
$scope.person.push({id:$scope.person.length,name:$scope.personmessage.nname,age:$scope.personmessage.nage,sex:$scope.personmessage.nsex});
$scope.fname="";
$scope.fage="";
$scope.fsex="";
}
else{
id=$scope.id;
$scope.person.splice(id,1,{id:$scope.person.length,name:$scope.personmessage.nname,age:$scope.personmessage.nage,sex:$scope.personmessage.nsex});
}
}
})
</script>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/ruobingbing/p/5955871.html
