JSFiddle - React, Tailwind, and code Playground

by Su YangCheng

HTML

<script src="https://code.angularjs.org/1.3.1/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<div ng-controller="MyCtrl">
    <h1>一、label for value in array / label for (key , value) in object</h1>
    <div class="well">
        Result: {{first.user}}
        <select ng-model="first.user" ng-options="item.gender as item.name for item in users" class="form-control"></select>
    </div>
    <div class="well">
        Result: {{first.product}}
        <select ng-model="first.product" ng-options="key as value for (key, value) in product" class="form-control"></select>
    </div>
    <h1>二、as 关键词</h1>
    <div class="well">
        Result: {{second.user}}
        <select ng-model="second.user" ng-options="item.gender as item.name for item in users" class="form-control"></select>
    </div>
    <div class="well">
        Result: {{second.product}}
        <select ng-model="second.product" ng-options="key as value for (key, value) in product" class="form-control"></select>
    </div>
    <h1>三、 `group by` 关键词</h1>
    <div class="well">
        Result: {{third.user}}
        <select ng-model="third.user" ng-options="item.name group by item.gender for item in users" class="form-control"></select>
    </div>
    <div class="well">
        Result: {{third.product}}
        <select ng-model="third.product" ng-options="key as value group by key for (key, value) in product" class="form-control"></select>
    </div>
    <h1>完整式</h1>
    <div class="well">
        Result: {{full.user}}
        <select ng-model="full.user" ng-options="item.age as item.name group by item.gender for item in users" class="form-control"></select>
    </div>
</div>

JavaScript

var app = angular.module('myApp',[]);

app.controller('MyCtrl', ['$scope', function($scope) {
    $scope.users = [
        { name: 'cipchk', gender: '男', age: 25 },
        { name: '卡色', gender: '男', age: 18 },
        { name: '外卖从来没遇到美女', gender: '女', age: 18 },
        { name: '今晚不知道要吃什么', gender: '女', age: 18 },
        { name: '其实.NET很好', gender: '女', age: 18 },
        { name: 'fhw r', gender: '女', age: 18 }
    ];
    
    // 相当于c# Dictionary<int, string>
    $scope.product = {
        1: 'KFC',
        2: '麦当苏',
        3: '鱼丸',
        4: '星巴克',
        5: '错了，星巴克放在前面'
    };
    
}]);