而 AngularJS 的 Templates 則是包括了 AngularJS 特殊的屬性(ex: ng-model)或元素(Directives)
所以 AngularJS 會融合 Templates 與 Model 和 Controller 的資訊來做到 View 的渲染以及 Two-Way Binding
本篇介紹一些常用或是好用的 AngularJS Templates：
- ng-repeat
ng-repeat 幾乎是一定會用到的一個 AngularJS 標籤屬性，他目的是用來在畫面上將
多筆資料的 Model 用迴圈的方式一個一個的建立到視圖上，如下範例所示：
<script>
var
demoApp = angular.module("demoApp", []);
demoApp.controller("demoCtrl", function($scope){
$scope.users = [
{uid:'1',
name: 'Allen', phone: '12493215'},
{uid:'2',
name: 'Alex', phone: '70314568'},
{uid:'3',
name: 'Alice', phone: '345106847'}
];
});
</script>
<div ng-controller="demoCtrl">
<ul>
<li ng-repeat="user in users">
Name: {{user.name}} <br/>
Phone: {{user.phone}} <br/>
</li>
</ul>
</div>
這個結果最後是 AngularJS 在網頁上呈現三個 li 元素，每筆資料各有每個 User 的資料
這是一個典型的 Template 與 Controller 和 Model 之間的關係，在 AngularJS 教學 - Controller and View 有提到
而 AngularJS 的官網也有一張蠻清晰的圖來描述他們之間的關係，不妨參考看看
- 一些 ng-repeat 的變數： $index、$first、$last、$even、$odd
$index 是用來描述 ng-repeat 目前的索引值，跟陣列一樣都從 0 開始
$first 是用來描述 ng-repeat 目前的 item 是否是第一個
$last 是用來描述 ng-repeat 目前的 item 是否是最後一個
$even 是用來描述 ng-repeat 目前的 item 是否是位在偶數個
$odd 是用來描述 ng-repeat 目前的 item 是否是位在奇數個
<li ng-repeat="user in users">
index: {{$index}} <br/>
Is First: {{$first}} <br/>
Is Last: {{$last}} <br/>
Is Even: {{$even}} <br/>
Is Odd: {{$odd}} <br/>
Name: {{user.name}} <br/>
Phone: {{user.phone}} <br/>
</li>
- ng-include
ng-inclide 是用來將其他的 HTML page 加載到目前的 HTML 內，
例如我定義了一個額外的 HTML page (include.html)內容如下
<p>I'am
a included page</p>
A quantity of users: {{users.length}}
並且在原本的頁面加入 <ng-include src="'include.html'"></ng-include>
指定 src 屬性到要 include 的 page 路徑，注意要用單引號括住整個路徑字串
如果想要在 page 被 include 近來時做一些事情，可以加上 onload 屬性來執行
- ng-switch
類似眾多語言理面的 switch 功能，如下為 AngularJS 的 ng-switch 功能
<script>
var
demoApp = angular.module("demoApp", []);
demoApp.controller("demoCtrl", function($scope){
$scope.users = [
{id:1, name: 'Allen',
phone: '12493215'},
{id:2, name: 'Alex',
phone: '70314568'},
{id:3, name: 'Alice',
phone: '345106847'}
];
$scope.selection = "Allen";
});
</script>
<div ng-controller="demoCtrl">
<select ng-model="selection" ng-options="user.id as user.name for user in users"></select>
${{selection}}
<div ng-switch on="selection">
<div ng-switch-when="1">Allen</div>
<div ng-switch-when="2">Alex</div>
<div ng-switch-when="3">Alice</div>
<div ng-switch-default>default</div>
</div>
</div>
我們需要注意的是 ng-switch 要給一個 on 屬性來指名當哪一個 Model 值變化的時候，
就要執行 Switch 迴圈一次，因此上述程式是指定了 selection 的值，
而 selection 的值會隨著上方的 select 標籤的選擇做變化，因此下方的 Switch 迴圈也會作出適當的反應
下一篇來介紹一下 AngularJS 提供的其他 View 方面的屬性！
沒有留言:
張貼留言