AngularJS 表達式
AngularJS 表達式寫在雙大括號內：{{ expression }}。
AngularJS 表達式把數據綁定到 HTML燎潮，這與 ng-bind 指令有異曲同工之妙倔丈。
AngularJS 將在表達式書寫的位置"輸出"數據憨闰。
AngularJS 表達式 很像 JavaScript 表達式：它們可以包含文字状蜗、運算符和變量需五。
- 數字
<div ng-app="">
<p>我的第一個表達式: {{ 5 + 5 }}</p>
</div>
<div ng-app="" ng-init="quantity=1;cost=5">
<p>總價： {{ quantity * cost }}</p>
</div>
<div ng-app="" ng-init="quantity=1;cost=5">
<p>總價： <span ng-bind="quantity * cost"></span></p>
</div>
- 字符串
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>姓名： {{ firstName + " " + lastName }}</p>
</div>
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>姓名： <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>
- 對象
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>姓為 {{ person.lastName }}</p>
</div>
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>姓為 <span ng-bind="person.lastName"></span></p>
</div>
- 數組
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>第三個值為 {{ points[2] }}</p>
</div>
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>第三個值為 <span ng-bind="points[2]"></span></p>
</div>
AngularJS 指令
AngularJS 指令是擴展的 HTML 屬性，帶有前綴 ng-轧坎。
ng-app 指令初始化一個 AngularJS 應用程序宏邮。
ng-init 指令初始化應用程序數據。
ng-model 指令把元素值（比如輸入域的值）綁定到應用程序缸血。
<div ng-app="" ng-init="firstName='John'">
<p>在輸入框中嘗試輸入：</p>
<p>姓名：<input type="text" ng-model="firstName"></p>
<p>你輸入的為： {{ firstName }}</p>
</div>
- 數據綁定
<div ng-app="" ng-init="quantity=1;price=5">
<h2>價格計算器</h2>
數量： <input type="number" ng-model="quantity">
價格： <input type="number" ng-model="price">
<p><b>總價：</b> {{ quantity * price }}</p>
</div>
- 重復 HTML 元素
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<p>使用 ng-repeat 來循環(huán)數組</p>
<ul>
<li ng-repeat="x in names"> {{ x }} </li>
</ul>
</div>
<div ng-app="" ng-init="names=[{name:'Jani',country:'Norway'},{name:'Hege',country:'Sweden'},{name:'Kai',country:'Denmark'}]">
<p>循環(huán)對象：</p>
<ul>
<li ng-repeat="x in names"> {{ x.name + ', ' + x.country }} </li>
</ul>
</div>
- 創(chuàng)建自定義的指令
AngularJS 通過被稱為 指令 的新屬性來擴展 HTML蜜氨。
AngularJS 通過內置的指令來為應用添加功能。
AngularJS 允許你自定義指令捎泻。
<body ng-app="myApp">
<runoob-directive></runoob-directive>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
template: "<h1>自定義指令!</h1>"
};
});
</script>
</body>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
restrict: "A",
template: "<h1>自定義指令!</h1>"
};
});
</script>
restrict 值可以是以下幾種:
E 作為元素名使用
A 作為屬性使用
C 作為類名使用
M 作為注釋使用
restrict 默認值為 EA, 即可以通過元素名和屬性名來調用指令飒炎。
df
d
fd
fd
f
df
d
f
d
f
df
d
f
dfd
f
d
f
df
d
f
d
