AngularSample/index.html at master · christophertfoo/AngularSample · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Ng Sample</title>

    <!-- Import jQuery -->
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <!-- Import AngularJS library -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>

    <!-- Import Booststrap -->
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

    <!-- Import application specific code -->
    <script type="text/javascript" src="js/sample.js"></script>
    <link href="css/sample.css" rel="stylesheet" type="text/css">
  </head>

  <body>
    <h1>Welcome to my Ng Sample!</h1>

    <!-- This div will use the userApp application module -->
    <div ng-app="userApp">

      <!-- This div will use the UserCtrl controller -->
      <div ng-controller="UserCtrl">
        <table class="table table-bordered">
          <thead>
            <th>Name</th>
            <th>Address</th>
            <th>Phone Number</th>
            <th></th>
            <th ng-if="users.length > 0"></th>
          </thead>

          <!-- Add a row for each user present in the model layer -->
          <tbody ng-repeat="user in users" ng-switch on="user.state">

            <!-- Edit Mode Template -->
            <tr ng-switch-when="edit">
              <td>
                <input type="text" class="form-control" ng-model="user.name" />
              </td>
              <td>
                <input type="text" class="form-control" ng-model="user.address" />
              </td>
              <td>
                <input type="text" class="form-control" ng-model="user.phone_number" />
              </td>
              <td>
                <input type="button" class="btn btn-success" ng-click="saveUser(user);" value="Save" />
              </td>
              <td>
                <input type="button" class="btn btn-danger" ng-click="cancelEdit(user);" value="Cancel" />
              </td>
            </tr>

            <!-- Deleted Mode Template -->
            <tr class="danger" ng-switch-when="deleted">
              <td>{{user.name}}</td>
              <td>{{user.address}}</td>
              <td>{{user.phone_number}}</td>
              <td>
                <input type="button" class="btn btn-danger" ng-click="deleteUser(user);" value="Delete Permanently" />
              </td>
              <td>
                <input type="button" class="btn btn-success" ng-click="undoDelete(user)" value="Undo"/>
              </td>
            </tr>

            <!-- Normal Mode Template -->
            <tr ng-switch-default>
              <td>{{user.name}} </td>
              <td>{{user.address}}</td>
              <td>{{user.phone_number}}</td>
              <td>
                <input type="button" class="btn btn-primary" ng-click="editUser(user);" value="Edit" />
              </td>
              <td>
                <input type="button" class="btn btn-danger" ng-click="deleteUser(user);" value="Delete"/>
              </td>
            </tr>
          </tbody>

          <!-- New User Form -->
          <tbody>
            <tr>
              <td>
              <input type="text" class="form-control" ng-model="newUser.name" />
              </td>
              <td>
              <input type="text" class="form-control" ng-model="newUser.address" />
              </td>
              <td>
              <input type="text" class="form-control" ng-model="newUser.phone_number" />
              </td>
              <td>
              <input type="button" class="btn btn-primary" ng-click="addUser();" value="Add"/>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </body>
</html>