AngularJS表達式用于應用程序數據綁定到HTML。表達式都寫在雙括號就像{{表達式}}。表達式中的行為跟ng-bind指令方式相同。 AngularJS應用表達式是純javascript表達式,并輸出它們被使用的數據在那里。
AngularJS通過表達式將數據綁定到HTML。
AngularJS表達式
AngularJS表達式寫在雙大括號中:{{ 表達式語句 }}。
AngularJS表達式綁定數據到HTML的方式與ng-bind指令的方式相同。
AngularJS會準確地將表達式“輸出”為計算的結果。
AngularJS表達式與JavaScript表達式有許多相似之處,它們都包含文字、運算符和變量。例如{{ 5 + 5 }}和{{ firstName + " " + lastName }}
- <!DOCTYPE html>
- <html>
- <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
- <body>
- <div ng-app="">
- <p>My first expression: {{ 5 + 5 }}</p>
- </div>
如果你去掉ng-app指令,表達式會被直接顯示在頁面上而不會被計算。
- <!DOCTYPE html>
- <html>
- <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
- <body>
- <div>
- <p>My first expression: {{ 5 + 5 }}</p>
- </div>
- </body>
- </html>
AngularJS數字
AngularJS數字和JavaScript數字一樣:
- <div ng-app="" ng-init="quantity=1;cost=5">
- <p>Total in dollar: {{ quantity * cost }}</p>
- </div>
同樣,我們可以使用ng-bind指令達到相同的效果:
- <div ng-app="" ng-init="quantity=1;cost=5">
- <p>Total in dollar: <span ng-bind="quantity * cost"></span></p>
- </div>
Note使用ng-init指令在AngularJS開發中非常普遍。在控制器一節中你將會看到更好的初始化數據的方法。
AngularJS字符串
AngularJS字符串與JavaScript字符串一樣:
- <div ng-app="" ng-init="firstName='John';lastName='Doe'">
- <p>The name is {{ firstName + " " + lastName }}</p>
- </div>
同樣,我們可以使用ng-bind指令達到相同的效果:
- <div ng-app="" ng-init="firstName='John';lastName='Doe'">
- <p>The name is <span ng-bind="firstName + ' ' + lastName"></span></p>
- </div>
AngularJS對象
AngularJS對象與JavaScript對象一樣:
- <div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
- <p>The name is {{ person.lastName }}</p>
- </div>
同樣,我們可以使用ng-bind指令達到相同的效果:
- <div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
- <p>The name is <span ng-bind="person.lastName"></span></p>
- </div>
AngularJS數組
AngularJS數組與JavaScript數組一樣:
- <div ng-app="" ng-init="points=[1,15,19,2,40]">
- <p>The third result is {{ points[2] }}</p>
- </div>
同樣,我們可以使用ng-bind指令達到相同的效果:
- <div ng-app="" ng-init="points=[1,15,19,2,40]">
- <p>The third result is <span ng-bind="points[2]"></span></p>
- </div>
AngularJS表達式與JavaScript表達式比較
與JavaScript表達式相同,AngularJS表達式也包含文字、運算符和變量。與JavaScript表達式不同的是,
AngularJS表達式可以寫在HTML里面。
AngularJS表達式不支持條件和循環語句,而且沒有exception語句。
AngularJS表達式支持過濾器。
以上所述就是本文的全部內容了,希望大家能夠喜歡。
新聞熱點
疑難解答
圖片精選