Angular 表示式(AngularJs Expression)
Angular 表示式(AngularJs Expression)
表示式介紹(expression intro):
angular表示式可以寫在雙括號中{{expression}}，也可以寫在指示(directive)中:ng-bind="expression"
angular會解析表示式，並返回這個表示式一開始所被賦予的值。Anjularjs表示式和javascript表示式很像，這
個表示式可以是包含文字(literals),操作符(operators),變數 (variables)。
舉個栗子
<!DOCTYPE html>
<html 如果去除了ng-app標籤的話，表示式便無法正常顯示這個表示式的值：
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
<div>
<p 你可以把表示式放到你喜歡的任何地方，angularjs會非常簡單的解析這個表示式，並返回結果
舉個栗子：
下面將使用angularjs來修改css的屬性：
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<body>
<div ng-app="" ng-init="myCol='lightblue'">
<input style="backgroud-color: {{myCol}}" ng-model="myCol">
</div>
</body>
</html>
注意：ng-app的名字在同一個網頁中不可以重複，否者會造成顯示的不正常。
angularjs number
Angularjs數字和javascript數字很相像：
舉個栗子：
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<body>
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: {{ quantity * cost }}</p>
</div>
</body>
</html>也可以使用ng-bind這個指示來實現同樣的功能：
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<body>
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Totoal in dollar : <span ng-bind="quantity * cost"></span></p>
</div>
</body>
</html>注意：
這裡的ng-app=""不能加值，否者這個會無法顯示。
AngularJS Object
angularJs物件和javascript物件很像：
下面舉個angularJS物件的栗子：
<div ng-app="" ng-init="person={firstName:'Jone',lastName:'Doe'}"
<p>The name is {{ person.lastName }} </p>
</div>除了使用變量表達的方式來顯示物件值之外，也可以使用使用ng-bind這個指示(directive)來顯示值。具體的程式碼如下：
<div ng-app="" ng-init="persion={firstName:'John',lastName:'Doe'}"
<p>The name is <span ng-bind="persion.lastName"></span></p>
</div>AngularJS Array
angularJs陣列和JavaScript陣列也非常像：
程式碼如下：
<div ng-app="" ng-init="points=[1,2,3,4,4]">
<p>The second result is {{ points[1]}}</p>
</div>使用ng-bind的方式如下所示：
<div ng-app="" ng-init="points=[1,2,3,4,4]">
<p>The second result is <span ng-bind="points[1]"></span></p>
</div>總結：
像javascript表示式一樣，anjularJS也可以包括一些字串，操作符，變數。
但是兩者還是各有優勢，angular表示式可以寫在html標籤中，javascript不行；
angular表示式支援過濾器，但是javascript不支援。
javascript可以支援條件(conditionals)，迴圈(loops)，和異常(exceptions)處理。