classroom-angularjs/index10.html at master · kaings/classroom-angularjs · 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
<!DOCTYPE html>
<html lang="en" ng-app="myProj1">
  <head>
    <title>TheNetNinja Angular Playlist</title>
    <link href="content/css/styles.css" rel="stylesheet" type="text/css" />
    <script src="app\lib\angular.min.js"></script>
    <script src="app\app10.js"></script>
  </head>
  <body>

    <begin ng-include="'header6.html'"></begin>
      <div class="content">
        <div ng-controller="MyProj1Controller">
          <button ng-click="order='name'">Order by Name</button>
          <button ng-click="order='level'">Order by Level</button>
          <input type="text" ng-model="keyword" placeholder="key in search keyword"/>
          <ul>
            <li ng-repeat="sport in sports | orderBy:order | filter:keyword" ng-show="sport.active"> <!--ng-hide will hide the 'true' ng-show will show the 'true'-->
              <img ng-src="{{sport.thumb}}" style="margin:-12px 10px 0 0; float:left; width:50px" ng-show="sport.thumb"/>
              <h3>{{sport.name}} price at {{sport.cost | currency:'$ '}}</h3>
              <div class="remove" ng-click="removeSport(sport)">x</div>
              <span class="belt" style="background:{{sport.marking}}">Level: {{sport.level}}</span>
            </li>
          </ul>

          <div>
            <form ng-submit="addSport()">
            <input type="text" placeholder="name" ng-model="newsport.name" />
            <input type="text" placeholder="level" ng-model="newsport.level"/>
            <input type="text" placeholder="cost" ng-model="newsport.cost"/>
            <input type="text" placeholder="color marking" ng-model="newsport.marking"/>
            <input type="submit" value="Submit" />
          </form>
        </div>
      </div>
  </body>
</html>