| Name | Age | Skills |
|---|---|---|
| {{title}} | {{member.age}} | {{member.skills.join('、')}} |
| {{person}} | {{members[person].age}} | {{members[person].skills.join('、')}} |
{{result}}
範例DEMO及程式碼：http://jsbin.com/zezuf/1/edit
一、view設計：
<div class="isa_info" style="margin-bottom:20px;background-color: #FFFFF4;" ng-controller="OptionCtrl">
<select ng-model="person" ng-options="title as title group by member.age + '歲' for (title, member) in members" ng-change="ng_change();">
<option value="">--請選擇成員--</option>
</select>
<table align="center" style="margin-left:auto;margin-right:auto;">
<tr><th>Name</th><th>Age</th><th>Skills</th></tr>
<tr ng-repeat="(title, member) in members" ng-hide="person != null">
<td>{{title}}</td>
<td>{{member.age}}</td>
<td>{{member.skills.join('、')}}
</tr>
<tr ng-show="person != null">
<td>{{person}}</td>
<td>{{members[person].age}}</td>
<td>{{members[person].skills.join('、')}}
</tr>
</table>
<div>{{result}}</div>
</div>
(一)ng-controller設定為OptionCtrl。(二)設計option部分，首先從ng-options說起，根據AngularJS selectAPI可以了解到下拉式選項集合的寫法，select as label group by group for value in array，而select的部分已繫結至ng-model的person，label則是下拉是選項出來顯示的項目，group by可將其群組化，如範例中將年齡做為群組來分割，value部分在此則已key、value方式從array(Object)中取出。
(三)table的顯示方面將tr分成兩個區塊，第一個tr是將全部資料以ng-repeat印出，也是利用當選項未被選擇(null)時顯示，第二區塊則印出所選則的人員資料，利用前面被繫結成key的person再搭配members取出資料。
(四)最後result的部分則是用以測試ng-change的事件觸發，當選項被改變才會觸發。
二、controller設計
var OptionCtrl = function($scope) {
$scope.members = {
'Jen': {
age: 19,
skills: ['Javascript', 'Java']
}
, 'Abel': {
age: 21,
skills: ['C#', 'C++']
}
, 'Ben': {
age: 21,
skills: ['C', 'AJAX']
}
, 'Cheng': {
age: 25,
skills: ['Ruby', 'PHP']
}
, 'Zeng': {
age: 28,
skills: ['ASP.NET', 'JQuery']
}
};
$scope.selectStatus;
$scope.ng_change = function() {
var before = $scope.selectStatus == null ? "請選擇成員" : $scope.selectStatus;
var after = $scope.person == null ? "請選擇成員" : $scope.person;
if ($scope.selectStatus == null)
$scope.selectStatus = "請選擇成員"
$scope.result = "由[" + before + "]改變成[" + after + "]";
$scope.selectStatus = after;
}
};
完整程式碼：
<!DOCTYPE html>
<html ng-app>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<link rel="stylesheet" href="https://aaad366b26125175724dd9c91cbade0cd1509dd0.googledrive.com/host/0B4GSVRY43FEXeUVOTlZNR0xqUkk/css/barAndInfo.css"/>
<script language="javascript">
var OptionCtrl = function($scope) {
$scope.members = {
'Jen': {
age: 19,
skills: ['Javascript', 'Java']
}
, 'Abel': {
age: 21,
skills: ['C#', 'C++']
}
, 'Ben': {
age: 21,
skills: ['C', 'AJAX']
}
, 'Cheng': {
age: 25,
skills: ['Ruby', 'PHP']
}
, 'Zeng': {
age: 28,
skills: ['ASP.NET', 'JQuery']
}
};
$scope.selectStatus;
$scope.ng_change = function() {
var before = $scope.selectStatus == null ? "請選擇成員" : $scope.selectStatus;
var after = $scope.person == null ? "請選擇成員" : $scope.person;
if ($scope.selectStatus == null)
$scope.selectStatus = "請選擇成員"
$scope.result = "由[" + before + "]改變成[" + after + "]";
$scope.selectStatus = after;
}
};
</script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="isa_info" style="margin-bottom:20px;background-color: #FFFFF4;" ng-controller="OptionCtrl">
<select ng-model="person" ng-options="title as title group by member.age + '歲' for (title, member) in members" ng-change="ng_change();">
<option value="">--請選擇成員--</option>
</select>
<table align="center" style="margin-left:auto;margin-right:auto;">
<tr><th>Name</th><th>Age</th><th>Skills</th></tr>
<tr ng-repeat="(title, member) in members" ng-hide="person != null">
<td>{{title}}</td>
<td>{{member.age}}</td>
<td>{{member.skills.join('、')}}
</tr>
<tr ng-show="person != null">
<td>{{person}}</td>
<td>{{members[person].age}}</td>
<td>{{members[person].skills.join('、')}}
</tr>
</table>
<div>{{result}}</div>
</div>
</body>
</html>
留言
張貼留言