Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!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>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
weihanchenpro
0viewers