使用 ng-options

AngularJS 下拉列表（ng-options）

一、基本用法：用数组创建下拉列表

使用 ng-options 指令可以通过数组或对象循环输出下拉选项。

<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>Code language: HTML, XML (xml)

ng-init 用于设置默认选中值（选中数组第一项）。

---

二、ng-options 与 ng-repeat 的区别

使用 ng-repeat 创建下拉列表

<select>
    <option ng-repeat="x in names">{{x}}</option>
</select>Code language: HTML, XML (xml)

两者的本质区别

对比项	ng-options	ng-repeat
循环目标	对象和数组	主要是数组
选中值类型	对象​	字符串​
适用场景	表单绑定、复杂数据	简单展示

优先使用 ng-options，尤其是需要处理对象数据时。

---

三、为什么 ng-options 更好？

数据源为对象数组时

$scope.sites = [
    { site: "Google", url: "http://www.google.com" },
    { site: "bamn",  url: "https://www.foxdevelop.com" },
    { site: "Taobao", url: "http://www.taobao.com" }
];Code language: PHP (php)

使用 ng-repeat（有局限性）

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

<h1>你选择的是: {{selectedSite}}</h1>Code language: HTML, XML (xml)

此时 selectedSite 只是一个字符串（url），无法获取完整对象信息。

使用 ng-options（推荐）

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

<h1>你选择的是: {{selectedSite.site}}</h1>
<p>网址为: {{selectedSite.url}}</p>Code language: HTML, XML (xml)

此时 selectedSite 是整个对象，可以灵活获取 site、url 等任意字段。

---

四、数据源为对象（key-value）

示例数据

$scope.sites = {
    site01: "Google",
    site02: "TikTok",
    site03: "Taobao"
};Code language: PHP (php)

写法

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

<h1>你选择的值是: {{selectedSite}}</h1>Code language: HTML, XML (xml)

其中 x 为 key，y 为 value。

选中后 selectedSite 的值为 value（即字符串）。

---

五、value 为对象的情况

示例数据

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

写法

<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars">
</select>Code language: HTML, XML (xml)

选中后 selectedCar 为 value 对应的对象，可直接使用：

<p>品牌：{{selectedCar.brand}}</p>
<p>型号：{{selectedCar.model}}</p>
<p>颜色：{{selectedCar.color}}</p>Code language: HTML, XML (xml)

---

六、总结

• 简单字符串列表：ng-options 或 ng-repeat 都可以
• 需要绑定对象数据： 必须用 ng-options
• ng-options 优势：选中值是对象，信息更完整，应用更灵活