Angular系列之表示式（二）
阿新 • • 發佈：2018-12-29
本篇將介紹angularJS中的表示式的使用以及另外一個angualarJS指令ng-init的使用；
相信在這裡，對angular的指令的可能不是很瞭解，那麼什麼是angular指令，angular指令又有什麼特性，又用在何處？
其實如果在看了angular第一篇文章的基礎上，那麼應該就很好理解angular指令+$scope作用域(後面會講,此處就是了解就好了)就類似與MVVM模式中ViewModel,負責業務邏輯層與檢視層之間互動的橋樑；$scope就是下達命令的人，那麼指令就是執行$scope下達的命令，我們就是$scope與指令相結合，就可以動態的根據業務邏輯對資料操作的改變而去改變頁面的顯示與動作。
總之：1.angular指令只使用在html中的標籤上；2.能夠把html標籤與js相關聯起來；3.指定的形式ng-xxx=""。
ng-init:初始化應用時建立一個變數;而變數是包括字串，物件，陣列等等。
先看執行結果：
執行例項demo：
注意：angular表示式寫在雙大括號內： {{變數名}}
<!DOCTYPE html> <html lang="en" ng-app=""> <head> <meta charset="UTF-8"> <title>angular之表示式的使用</title> </head> <body> <!-- AngularJS 表示式寫在雙大括號內：{{ expression }}。 AngularJS 表示式把資料繫結到 HTML，這與 ng-bind 指令有異曲同工之妙 AngularJS 表示式不支援條件判斷，迴圈及異常 ng-init 可以定義字串陣列物件等 --> <!-- 1.數字--> <div ng-init="pay=2;money=7"> <p>總支出： {{pay*money}}</p> </div> <!--2.字串--> <div ng-init="firstName='liu';lastName='qiang'"> <p>姓名： {{firstName + lastName}}</p> </div> <!--3.物件--> <div ng-init="person={name:'liuqiang',sex:'男',age:23}"> <p>姓名：{{person.name}} 年齡：{{person.age}}</p> </div> <!--4.陣列--> <div ng-init="arr=[0,1,3,8,5,4,9]"> <p>陣列的第三個數：{{arr[3]}}</p> <p>陣列的第三個數：<span ng-bind="arr[3]"></span></p> </div> </body> </html> <script src="https://cdn.bootcss.com/angular.js/1.6.3/angular.min.js"></script>