Home » AngularJS 入門教學

[AngularJS]AngularJS 入門教學 - ngRepeat (一)

[ 日期： | 瀏覽：31,797 | 迴響：7 ]
範例 1

有用過 Smarty 的都知道 foreach 的好用，就像一般我們在寫程式中若需要做一些重覆性的輸出都會使用類似 for 或是 foreach 的功能，而 AngularJS 則是提供了 ng-repeat 來讓我們達到類似效果。

打開我們的 practice/index.html：

檢視原始碼 HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!doctype html>
<html ng-app>
<head>
	<meta charset="UTF-8">
	<title>男丁格爾's 脫殼玩 - AngularJS</title>
	<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js"></script>
</head>
<body>
	<div class="well span6" style="margin-top:20px;">
		<ul>
			<li>男丁格爾</li>
			<li>jelly</li>
			<li>梅干桑</li>
			<li>莫希爾</li>
		</ul>
	</div>
</body>
</html>

假設我們也想要產生一樣的清單的話，首先針對 div 加上 ng-controller：

檢視原始碼 HTML
1

<div class="well span6" style="margin-top:20px;" ng-controller="FriendsCtrl">

然後加入個 js/controller.js，並產生一個相對應名稱的 Controller，再加入個簡單的 friends 陣列：

檢視原始碼 JavaScript
1
2
3

var FriendsCtrl = function($scope){
	$scope.friends = [ '男丁格爾', 'jelly', '梅干桑', '莫希爾' ];
};

接著，把 li 都刪除到只剩下一個，並加入宣告式語法 ng-repeat：

檢視原始碼 HTML
1

<li ng-repeat="friend in friends">{{ friend }}</li>

還記得嗎？friends 是個陣列，ng-repeat 會把陣列中的元素一一取出並放在 friend 上，它就等於是 model 的角色囉。

快來預覽吧：
ngrepeat-0

是不是很方便呢！除了基本的取出之外，還能再搭配 $index 來輸出序號，就像 for 迴圈的 i 一樣：

檢視原始碼 HTML
1

<li ng-repeat="friend in friends">[{{ $index + 1 }}] {{ friend }}</li>

ngrepeat-1

當然不是只有陣列可以這樣的迭代，物件也是可以的。像是我們把 friends 中的元素改成物件：

檢視原始碼 JavaScript
1
2
3
4
5
6

$scope.friends = [
	{ name: '男丁格爾', age: 18 }, 
	{ name: 'jelly', age: 16 }, 
	{ name: '梅干桑', age: 30 }, 
	{ name: '莫希爾', age: 31 }
];

因為變成物件了，所以針對 friend 也可以用物件的方式來使用：

檢視原始碼 HTML
1

<li ng-repeat="friend in friends">{{ friend.name }}({{ friend.age }})</li>

ngrepeat-2

有趣嗎？那麼讓我們在 ul 前面再新增一個輸入方塊吧：

檢視原始碼 HTML
1
2
3

<label>Search:</label>
<input type="text" ng-model="search">
<hr>

這邊我們幫輸入方塊綁上一個名叫 search 的 model，在這邊主要是用在 ng-repeat 中的過濾器(Filters)使用，用法是：

檢視原始碼 HTML
1

{{ expression | filters}}

AngularJS 提供了一些基本的過濾或是轉換用的過濾器，常用的像是用來搜尋過濾用的 filter、限制資料數量的 limitTo 等等。所以筆者想將輸入方塊中輸入的內容當做查詢過濾清單使用：

檢視原始碼 HTML
1

<li ng-repeat="friend in friends | filter:search">{{ friend.name }}({{ friend.age }})</li>

將將~快看快看~
ngrepeat-3

輸入的內容會立即反應在清單上，這就是資料綁定(Data-binding)的威力呢！

好啦~最後還是要來個簡單的題目：請在清單前面多加入一個 h5 元素，內容就是顯示出共有幾個清單項目。

範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

7 筆針對 [AngularJS]AngularJS 入門教學 - ngRepeat (一) 的迴響

  2. 老師，請問一下，ANGULARJS有辦法動態用push的方式放入資料嗎？
    例如我想要讓li ng-repeat出facebook上的朋友，有辦法動態載入嗎？
    謝謝！

  3. 想請問，程式碼中的{{ friend.name }}。如果當使用者關閉瀏覽器的JavaScript功能時，就會直接把{{ friend.name }}整串顯示給使用者看，是否有辦法讓他變成空白之類的呢?

  4. 看過很多AngularJS的教學文，就屬您的說的最清楚易懂！

    請問老師，現在想要做的就是ng-repeat
    但若陣列是透過別台伺服器取得，有辦法嗎？
    有看過資料並實驗過，http.get好像不能用於跨網域？
    謝謝您的指導與分享！

發表迴響