AngularJS——6、Select（选择框）

最新推荐文章于 2025-10-29 12:30:40 发布

原创最新推荐文章于 2025-10-29 12:30:40 发布 · 328 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#AngularJS

AngularJS 专栏收录该内容

8 篇文章

订阅专栏

本文探讨了在AngularJS中使用ng-options和ng-repeat创建选择框的区别。当数据源为数组时，ng-options通过对象循环提供更灵活的信息获取方式。而在数据源为对象时，ng-options依然表现出优势，可以选择对象作为值。结论是，ng-options在处理对象选项时更为优越。

<!-- 通用部分 -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">    
    </head>
    <body>
        ......
        <script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
        ......
    </body>
</html>

数据源为数组

1、ng-options创建（通过对象和数组循环输出）（选项为对象）

<div ng-app="xxApp" ng-controller="xxCtrl">
    <select ng-model="selected" ng-options="x for x in TVnames">
    </select>
</div>
<script>
    var app = angular.module('xxApp', []);
    app.controller('xxCtrl', function($scope) {
        $scope.TVnames = ["《我在北京等你》", "《隐秘而伟大》", "《号手就位》"];
    });
</script>

2、ng-repeat创建（通过数组循环 HTML 代码输出）（选项为字符串）

<div ng-app="xxApp" ng-controller="xxCtrl">
    <select>
        <option ng-repeat="x in RoleNames">{{x}}</option>
    </select>
</div>
<script>
    var app = angular.module('xxApp', []);
    app.controller('xxCtrl', function($scope) {
        $scope.RoleNames = ["徐天", "顾耀东", "夏拙"];
    });
</script>

ng-options VS ng-repeat

<div ng-app="xxApp" ng-controller="xxCtrl">
    <p>选择人物角色:</p>
    <select ng-model="selected" ng-options="x.role for x in alls">
    </select>
    <p>角色: {{selected.role}}</p>
    <p>剧名: {{selected.TV}}</p>
</div>
<script>
    var app = angular.module('xxApp', []);
    app.controller('xxCtrl', function($scope) {
        $scope.alls = [
	        {role : "徐天", TV : "《我在北京等你》"},
	        {role : "顾耀东", TV : "《隐秘而伟大》"},
	        {role : "夏拙", TV : "《号手就位》"}
	    ];
    });
</script>

↑ ↓

<div ng-app="xxApp" ng-controller="xxCtrl">
    <p>选择人物角色:</p>
    <select ng-model="selected">
        <option ng-repeat="x in alls" value="{{x.TV}}">{{x.role}}</option>
    </select>
    <p>选择: {{selected}}</p>
</div>
<script>
    var app = angular.module('xxApp', []);
    app.controller('xxCtrl', function($scope) {
        $scope.alls = [
	        {role : "徐天", TV : "《我在北京等你》"},
	        {role : "顾耀东", TV : "《隐秘而伟大》"},
	        {role : "夏拙", TV : "《号手就位》"}
	    ];
    });
</script>

结论：当选项是对象时，获取信息更多更灵活。因此，ng-options更具优势！

数据源为对象

（x,y）即（key,value）

选择的值value可以是字符串，也可以是对象（由数据源决定）

<div ng-app="xxApp" ng-controller="xxCtrl">
    <p>选择人物角色：
        <!-- (key,value) -->
        <select ng-model="selected" ng-options="x for (x, y) in alls">
        </select>
    </p>
    <!-- 选中的值y是字符串 -->
    <p>选择: {{selected}}</p>
</div>
<script>
    var app = angular.module('xxApp', []);
    app.controller('xxCtrl', function($scope) {
        $scope.alls = {
                role1 : "徐天",
	        role2 : "顾耀东",
	        role3 : "夏拙"
	    };
    });
</script>

<div ng-app="xxApp" ng-controller="xxCtrl">
    <!-- 一、下拉菜单使用key -->
    <p>选择人物角色:
        <select ng-model="selected1" ng-options="x for (x, y) in alls">
        </select>
    </p>
    <!-- 选中的值y是一个对象 -->
    <p>选择: {{selected1.role}}</p>
    <p>剧名: {{selected1.TV}}</p>
    <p>时间: {{selected1.time}}</p>
    <br>
    <!-- 二、下拉菜单直接使用对象的属性 -->
    <p>选择剧名:
        <select ng-model="selected2" ng-options="y.TV for (x, y) in alls">
        </select>
    </p>
    <p>选择: {{selected2.role}}</p>
    <p>剧名: {{selected2.TV}}</p>
    <p>时间: {{selected2.time}}</p>
</div>
<script>
    var app = angular.module('xxApp', []);
    app.controller('xxCtrl', function($scope) {
        $scope.alls = {
            role1 : {role : "徐天", TV : "《我在北京等你》", time : "2020年"},
            role2 : {role : "顾耀东", TV : "《隐秘而伟大》", time : "2020年"},
            role3 : {role : "夏拙", TV : "《号手就位》", time : "未知"}
        }
    });
</script>