AngularJS学习之旅—AngularJS Select(十)

1、AngularJS Select(选择框)
　　AngularJS 可以使用数组或对象创建一个下拉列表选项。
　　　　ng-option：创建一个下拉列表，列表项通过对象和数组循环输出
　　　　　　eg：

<div ng-app="myApp" ng-controller="myCtrl">
 
<select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names">
</select>
 
</div>
 
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Google", "Runoob", "Taobao"];
});
</script>

　　ng-repeat：通过数组来循环 HTML 代码来创建下拉列表
　　　　eg：

<select>
　　　<option ng-repeat="x in names">{{x}}</option>
</select>

2、ng-option比ng-repeat更适合创建下拉列表的优势

　　使用 ng-options 的选项是一个对象， ng-repeat 是一个字符串。

　　实例1

$scope.sites = [
    {site : "Google", url : "http://www.google.com"},
    {site : "baidu", url : "http://www.baidu.com"},
    {site : "Taobao", url : "http://www.taobao.com"}
];

<select ng-model="selectedSite">
<option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>
</select>

<h1>你选择的是: {{selectedSite}}</h1>

<select ng-model="selectedSite" ng-options="x.site for x in sites">
</select>

<h1>你选择的是: {{selectedSite.site}}</h1>
<p>网址为: {{selectedSite.url}}</p>

　　实例2

$scope.sites = {
    site01 : "Google",
    site02 : "Runoob",
    site03 : "Taobao"
};

<select ng-model="selectedSite" ng-options="x for (x, y) in sites">
</select>

<h1>你选择的值是: {{selectedSite}}</h1>

$scope.cars = {
car01 : {brand : "Ford", model : "Mustang", color : "red"},
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : "black"}
};

<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars">
</select>

3、代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="js/angular.min.js"></script>
</head>

<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <!-- 使用 ng-options 创建选择框 -->
        <div>
            <h2>使用 ng-options 创建选择框</h2>
            <select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names"></select>
            <select ng-model="selectSite" ng-options="s.site for s in sites track by it.url"></select>
            <h4>你选择的是: {{selectSite.site}}</h4>
            <p>网址为: {{selectSite.url}}</p>
            <select ng-model="selectedCar" ng-options="y.brand for (x,y) in cars"></select>
            <h4>你选择的是: {{selectedCar.brand}}</h4>
            <h4>模型: {{selectedCar.model}}</h4>
            <h4>颜色: {{selectedCar.color}}</h4>
        </div>
        <p></p>
         <!-- 使用 ng-repeat 创建选择框 -->
        <div>
            <h2>使用 ng-repeat 创建选择框</h2>
            <select>
                <option ng-repeat="x in names">{{x}}</option>
            </select>
            <select ng-model="selectedSite">
                <option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>
            </select>
            <h4>你选择的是: {{selectedSite}}</h4>
        </div>
    </div>
</body>

</html>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function ($scope) {
        $scope.names = ["Google", "baidu", "Taobao"];
        $scope.sites = [
            {site : "Google", url : "http://www.google.com"},
            {site : "baidu", url : "http://www.baidu.com"},
            {site : "Taobao", url : "http://www.taobao.com"}
        ];
        $scope.cars = {
            car01 : {brand : "Ford", model : "Mustang", color : "red"},
            car02 : {brand : "Fiat", model : "500", color : "white"},
            car03 : {brand : "Volvo", model : "XC90", color : "black"}
        };
    });
</script>