首页 > 代码库 > angulr小例子，增加修改信息
angulr小例子，增加修改信息
<!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> 
angulr小例子，增加修改信息
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。