Angular/Lesson2.html at master · wjjameslee/Angular · 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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html ng-app>
<head>
  <!-- {{ }} in AngularJS represents expressions -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
  <title>JS Bin</title>
</head>
<body>
      <div ng-init="number = 0">
        <!-- p ng-bind="number"</p> -->
        <button ng-click="number = number + 1">+1</button>
        <button ng-click="number = number - 1">-1</button>
        <p> {{ number }} </p>

      </div>

      Show me the paragraph
      <input type="checkbox" ng-model="isChecked">
       <p ng-if="isChecked">Secret Message!</p>
       <!-- ng-if and ng-show do the same thing here, but there is an important difference
            ng-if actually removes this element from the DOM tree, while ng-show will just use css elements to properly "hide" it . ng-if will make the element lose styling-->

      <div ng-init="num = 19">
        <input type="text" ng-model="guess">
          <p ng-hide="guess != num">Correct</p>
          <p ng-show="guess != num">Incorrect</p>

      </div>
</body>
</html>


<!DOCTYPE html>
<html ng-app>
<head>
  <!-- {{ }} in AngularJS represents expressions -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
  <title>JS Bin</title>
  <style>
    .red {
      border-color : red;
    }
    .green {
      border-color : green;
    }
    .r {
      color : red;
    }
    .gr {
      color : green;
    }
  </style>
</head>

<body>
      <div ng-init="num = 19">
        <!-- ng-class modifies the css class dynamically under some conditions -->
        <input type="text" ng-model="guess" ng-class="{red: guess != num, green: guess == num}">

      </div>

      <div ng-init="numbers = [0, 1, 2, 3, 4, 5, 6, 7]">
        <ul>
          <li ng-repeat="number in numbers" ng-class="{r: $even, gr: $odd}">{{ number }}</li>
        </ul>
      </div>

      <div ng-init="names = ['Smith', 'Smith']">
        <ul>
          <li ng-repeat="name in names track by $index">{{name}}</li>
        </ul>
      </div>

      <div ng-init="object = [{surname : 'Smith', firstname : 'Joe'}, {surname : 'Smith', firstname : 'Sue'}]">
        <ul>
          <li ng-repeat="person in object">{{person.surname}}, {{person.firstname}}</li>
      </div>


</body>
</html>


<!DOCTYPE html>
<html ng-app>
<head>
  <!-- {{ }} in AngularJS represents expressions -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
  <title>JS Bin</title>
  <style>
    .red {
      border-color : red;
    }
    .green {
      border-color : green;
    }
    .r {
      color : red;
    }
    .gr {
      color : green;
    }
  </style>
</head>

<body>
      <div ng-init="rebels = [ {name : 'Luke Skywalker', profession : 'Jedi', weapon : 'Lightsaber', age : 19},
                    {name : 'Ben Kenobi', profession : 'Jedi', weapon : 'Lightsaber', age : 56},
                    {name : 'Han Solo', profession : 'Smuggler', weapon : 'Laser Blaster', age : 32},
                    {name : 'Chewbacca', profession : 'Pilot', weapon : 'Bowcaster', age : 200} ]">

        <select name="" id="" ng-model="rebel" ng-options="rebel.name group by rebel.weapon for rebel in rebels"></select>
        <p> You have selected: {{rebel.name}} ({{rebel.profession}})</p>
  </div>


</body>
</html>