English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

AngularJS 基础教程

AngularJS Select(选择框)

AngularJS 可以使用数组或对象创建一个下拉列表选项。

使用 ng-options 创建选择框

在 AngularJS 中我们可以使用 ng-option 指令用于创建一个下拉列表，列表项通过对象和数组循环输出，如下示例：

在线示例

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', []);</script>
app.controller('myCtrl',　function($scope)　{
　　　　$scope.names = ["Baidu", "w3codebox", "Taobao"];
});</script>

ng-init per impostare il valore predefinito selezionato.

ng-options e ng-repeat

Possiamo anche usareng-repeat l'indicazione per creare liste a discesa:

在线示例

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

ng-repeat l'indicazione crea liste a discesa ricorrendo all'HTML, ma ng-options l'indicazione è più adatta a creare liste a discesa, e ha i seguenti vantaggi:

Usare ng-options le opzioni sono un oggetto, ng-repeat è una stringa.

Quale dovrebbe essere meglio?

Supponiamo di utilizzare il seguente oggetto:

$scope.sites = [
　　　　{site: "Google", url: "http://www.google.com"},
　　　　{site: "w3codebox", url: "http://it.oldtoolbag.com"},
　　　　{site: "Taobao", url: "http://www.taobao.com"}
);

ng-repeat ha dei limiti, la scelta del valore è una stringa:

在线示例

Usare ng-repeat:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>Seleziona il sito:</p>
<select ng-model="selectedSite">
<option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>
</select>
<h1>Hai scelto: {{selectedSite}}</h1>
</div>
<script>
var　app　=　angular.module('myApp',　[]);
app.controller('myCtrl',　function($scope)　{
　　　$scope.sites = [
　　　　　　　　{site: "Google", url: "http://www.google.com"},
　　　　　　　　{site: "w3codebox", url: "http://it.oldtoolbag.com"},
　　　　　　　　{site: "Taobao", url: "http://www.taobao.com"}
　　　　);
});
</script>
<p>Questo esempio dimostra come creare una lista a discesa utilizzando l'indicazione ng-repeat, la scelta del valore è una stringa.</p>
</body>
</html>
测试看看 ‹/›

Usare ng-options l'indicazione, la scelta del valore è un oggetto:

在线示例

Usare ng-options:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>Seleziona il sito:</p>
<select ng-model="selectedSite" ng-options="x.site for x in sites">
</select>
<h1>Hai scelto: {{selectedSite.site}}</h1>
<p>Il sito web è: {{selectedSite.url}}</p>
</div>
<script>
var　app　=　angular.module('myApp',　[]);
app.controller('myCtrl',　function($scope)　{
　　　$scope.sites = [
　　　　　　　　{site: "Google", url: "http://www.google.com"},
　　　　　　　　{site: "w3codebox", url: "http://it.oldtoolbag.com"},
　　　　　　　　{site: "Taobao", url: "http://www.taobao.com"}
　　　　);
});
</script>
<p>Questo esempio dimostra come creare una lista a discesa utilizzando l'indicazione ng-options, la scelta del valore è un oggetto.</p>
</body>
</html>
测试看看 ‹/›

Quando la scelta del valore è un oggetto, possiamo ottenere più informazioni e l'applicazione è più flessibile.

数据源为对象

前面示例我们使用了数组作为数据源，以下我们将数据对象作为数据源。

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

ng-options 使用对象有很大的不同，如下所示：

在线示例

使用对象作为数据源: x 为键(key),y 为值(value):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>选择的网站是:</p>
<select ng-model="selectedSite" ng-options="x for (x, y) in sites">
</select>
<h1>你选择的值是: {{selectedSite}}</h1>
</div>
<p>该实例演示了使用对象作为创建下拉列表。</p>
<script>
var　app　=　angular.module('myApp',　[]);
app.controller('myCtrl',　function($scope)　{
　　　　$scope.sites = {
　　　　　　　　site01 : "Google",
　　　　　　　　site02 : "w3codebox",
　　　　　　　　site03 : "Taobao"
　　　　};
});
</script>
</body>
</html>
测试看看 ‹/›

你选择的值为在 key-value 对中的 value。

value 在 key-value 对中也可以是个对象：

在线示例

选择的值在 key-value 对的 value 中, 这是它是一个对象:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>选择一辆车:</p>
<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>
<h1>你选择的是: {{selectedCar.brand}}</h1>
<h2>模型: {{selectedCar.model}}</h2>
<h3>颜色: {{selectedCar.color}}</h3>
<p>注意选中的值是一个对象。</p>
</div>
<script>
var　app　=　angular.module('myApp',　[]);
app.controller('myCtrl',　function($scope)　{
　　　　$scope.cars　=　{
　　　　　　　　car01　:　{brand　:　"Ford",　model　:　"Mustang",　color　:　"red"},
　　　　　　　　car02　:　{brand　:　"Fiat",　model　:　"500",　color　:　"white"},
　　　　　　　　car03　:　{brand　:　"Volvo",　model　:　"XC90",　color　:　"black"}
　　　　}
});
</script>
</body>
</html>
测试看看 ‹/›

在下拉菜单也可以不使用key-value 对中的 　key , 直接使用对象的属性：

在线示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>选择一辆车:</p>
<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars"></select>
<p>你选择的是:　{{selectedCar.brand}}</p>
<p>型号为:　{{selectedCar.model}}</p>
<p>颜色为:　{{selectedCar.color}}</p>
<p>下拉列表中的选项也可以是对象的属性。</p>
</div>
<script>
var　app　=　angular.module('myApp',　[]);
app.controller('myCtrl',　function($scope)　{
　　　　$scope.cars　=　{
　　　　　　　　car01　:　{brand　:　"Ford",　model　:　"Mustang",　color　:　"red"},
　　　　　　　　car02　:　{brand　:　"Fiat",　model　:　"500",　color　:　"white"},
　　　　　　　　car03　:　{brand　:　"Volvo",　model　:　"XC90",　color　:　"black"}
　　　　}
});
</script>
</body>
</html>
测试看看 ‹/›

　 　 　 　 　 　 　 　 　 　 　 　 　 　

AngularJS 参考手册AngularJS Http