[AngularJS]AngularJS 入門教學 - ngRoute 與 ngView (三)

當我們能好好的利用 $route 的話，那麼在開發一些需要依參數來執行某些功能時就會很方便及快速。

現在讓我們來將在 AngularJS 入門教學 - ngRoute 與 ngView (一)最後的範例進行加強，原本進入到 #/edit 時都是看到第一筆資料，筆者希望能在首頁將每一筆資料都加上超鏈結，讓他們點到後就直接進入到 #/edit，同時將該筆資料的編號帶過來，接著再把該筆資料顯示出來，最後按下 Update 鈕後再回到首頁。

所以先讓我們來改一下用在首頁顯示清單的 view.html：

1
2
3
4
5

<ul>
	<li ng-repeat="person in friends">
		<a ng-href="#/edit/{{ $index }}">{{ person.name }}</a> : {{ person.reward | number }}
	</li>
</ul>

這邊只是很簡單的加上個超鏈結，如果忘了 $index 是那來的話，請回到 AngularJS 入門教學 - ngRepeat (一)再仔細看一下。

先來看加上超鏈結後的效果：

再利用開發者工具來看一下產生出來的超鏈結中的 URL 內容：

如果正確的話是會顯示為 #/edit/index。

接下來要將我們的 $route 來重新設定一下，因為現在使用 #/edit 時得有個參數才行：

1
2
3
4

$routeProvider.when('/edit/:index', {
	templateUrl: 'edit.html',
	controller: 'EditCtrl'
});

除了多設定說需要一個參數之外，同時還額外再指定另一個控制器 EditCtrl 來處理所取得的參數：

1
2
3

onePiece.controller('EditCtrl', function($scope, $routeParams){
	$scope.index = $routeParams.index;
});

將從 $route 帶過來的參數從 $routeParams 中取出放在 $scope 的 index 變數中。接著不要忘記得把我們的 edit.html 中寫死的索引改成 index 才行：

1
2
3
4
5
6
7
8

<label>姓名:</label>
<input type="text" ng-model="friends[index].name">
 
<label>懸賞金:</label>
<input type="text" ng-model="friends[index].reward">
 
<br>
<a class="btn btn-primary" ng-href="#/">Update</a>

筆者多新增一個超鏈結用來更新並回到首頁。

所以當我們點擊"娜美"的話，就會進入到 #/edit/2：

有鑑於娜美在龐克哈薩德研究所的傑出表現，所以筆者要來調高她的懸賞金為 3000萬貝里：

然後按下 "Update" 鈕後回到首頁：

有沒有發現到娜美的那筆資料也同步更新了呢？這就是雙向資料綁定(Two-way data-binding)的威力啦！

作業的部份就請各位再多做一個頁面用來新增角色用吧！