案例:AngularJS案例     状态:可编辑再运行    进入竖版
 运行结果 
x
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<meta charset="utf-8">
5
<link rel="stylesheet" href="/css/bootstrap/bootstrap3.3.7.min.css">
6
<script src="/js/angular.js1.4.6/angular.min.js"></script>
7
</head>
8
<body ng-app="myApp" ng-controller="userCtrl">
9
10
<div class="container">
11
12
<h3>Users</h3>
13
14
<table class="table table-striped">
15
  <thead>
16
    <tr>
17
      <th>编辑</th>
18
      <th></th>
19
      <th></th>
20
    </tr>
21
  </thead>
22
  <tbody>
23
    <tr ng-repeat="user in users">
24
      <td>
25
        <button class="btn" ng-click="editUser(user.id)">
26
          <span class="glyphicon glyphicon-pencil"></span>编辑
27
        </button>
28
      </td>
29
      <td>{{ user.fName }}</td>
30
      <td>{{ user.lName }}</td>
31
    </tr>
32
  </tbody>
33
</table>
34
35
<hr>
36
<button class="btn btn-success" ng-click="editUser('new')">
37
<span class="glyphicon glyphicon-user"></span>创建新用户
38
</button>
39
<hr>
40
41
<h3 ng-show="edit">创建新用户:</h3>
42
<h3 ng-hide="edit">编辑用户:</h3>
43
44
<form class="form-horizontal">
45
  <div class="form-group">
46
    <label class="col-sm-2 control-label">名:</label>
47
    <div class="col-sm-10">
48
    <input type="text" ng-model="fName" ng-disabled="!edit" placeholder="名">