AngularJS的數據綁定表達式使用的HTML。
AngularJS表達式
AngularJS表達式可以雙括號內寫: {{ expression }}
AngularJS表達式也可以指令裡面寫: ng-bind=" expression "
。
AngularJS將解決的表達,並返回結果正是表達被寫入。
AngularJS表情很像JavaScript表達式:它們可以包含文字,運算符和變量。
例如{{5 + 5}}或{{的firstName +“”+ lastName的}}
例
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
試一試» 如果您刪除了ng-app
指令,HTML將顯示表達式,因為它是,不解決它:
例
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div>
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
試一試» 只要你喜歡,你可以寫表達式,AngularJS會簡單地解析表達式並返回結果。
例如:讓AngularJS改變CSS屬性的值。
下面改變輸入框顏色,通過改變它的價值:
例
<div ng-app="" ng-init="myCol='lightblue'">
<input
style="background-color:{{myCol}}" ng-model="myCol" value="{{myCol}}">
</div>
試一試» 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>
試一試» 採用ng-init 是不是很常見。 你會學到更好的方式有關控制器的章節中初始化數據。 |
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表達式不支持條件語句,循環和異常,而JavaScript表達式做。
AngularJS表達式支持濾鏡,而JavaScript表達式沒有。