实现思路：分步骤完成开发，逐渐添加功能：
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>
时间： 2024-10-10 11:24:21