标签：
实现思路：分步骤完成开发，逐渐添加功能：
1.实现输出users对象。
2.实现点击“编辑”按钮，在表单中显示firstname和lastname，并不可修改。
3.实现“新建用户”和“编辑用户”的切换。
4.实现“创建新用户”按钮。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script> 7 </head> 8 9 <body ng-app="myApp" ng-controller="userCtl"> 10 <table> 11 <tr> 12 <TD></TD><td>名</td><td>姓</td> 13 </tr> 14 <tr ng-repeat="user in users"> 15 <TD><button type="button" ng-click="editUser(user.id)">编辑</button></TD><td>{{user.firstname}}</td><td>{{user.lastname}}</td> 16 </tr> 17 </table> 18 <input type="button" value="创建新用户" ng-click="editUser(‘new‘)"> 19 <h3 ng-show="edit">新建用户</h3> 20 <h3 ng-hide="edit">编辑用户</h3> 21 <form> 22 firstname:<input type="text" name="firstnam" ng-model="firstname" ng-disabled="!edit"><br> 23 lastname :<input type="text" name="lastname" ng-model="lastname" ng-disabled="!edit"><br> 24 密 码：<input type="password" name="passwd1" ><br> 25 重 复 密 码：<input type="password" name="passwd2" ><br> 26 <input type="submit"> 27 </form> 28 <script> 29 var app=angular.module("myApp",[]); 30 app.controller("userCtl",function($scope){ 31 $scope.firstname=‘‘; 32 $scope.lastname=‘‘; 33 $scope.edit=true; 34 $scope.users=[{id:1,firstname:‘john‘,lastname:‘cena‘},{id:2,firstname:‘jeff‘,lastname:‘chen‘},{id:3,firstname:‘bill‘,lastname:‘gates‘},]; 35 $scope.editUser = function(id){ 36 if(id == ‘new‘){ 37 $scope.edit=true; 38 $scope.firstname=‘‘; 39 $scope.lastname=‘‘; 40 41 } else { 42 $scope.edit = false; 43 $scope.firstname=$scope.users[id-1].firstname; 44 $scope.lastname=$scope.users[id-1].lastname; 45 $scope.passwd1=‘‘; 46 $scope.passwd2=‘‘; 47 } 48 }; 49 }); 50 </script> 51 </body> 52 </html>
标签：
原文地址：http://www.cnblogs.com/cag2050/p/5111473.html
