2014年7月29日 星期二

AngularJS:ng-options、ng-change、select group by、objects get key and values









NameAgeSkills
{{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-modelpersonlabel則是下拉是選項出來顯示的項目,group by可將其群組化,如範例中將年齡做為群組來分割,value部分在此則已key、value方式從array(Object)中取出。
(三)table的顯示方面將tr分成兩個區塊,第一個tr是將全部資料以ng-repeat印出,也是利用當選項未被選擇(null)時顯示,第二區塊則印出所選則的人員資料,利用前面被繫結成keyperson再搭配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>

沒有留言:

張貼留言