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

AngularJS 基础教程

AngularJS Select(选择框)

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

使用 ng-options 创建选择框

在 AngularJS 中我们可以使用 Dans l'exemple précédent, nous avons utilisé un tableau comme source de données, dans l'exemple suivant, nous utiliserons un objet comme source de données.-option 指令来创建一个下拉列表，列表项通过对象和数组循环输出，如下示例:

Exemple en ligne

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　=　["Baidu",　"w3codebox",　"Taobao"];
});/script>

Dans l'exemple précédent, nous avons utilisé un tableau comme source de données, dans l'exemple suivant, nous utiliserons un objet comme source de données.-init 设置默认选中值。

Dans l'exemple précédent, nous avons utilisé un tableau comme source de données, dans l'exemple suivant, nous utiliserons un objet comme source de données.-options 与 ng-repeat

我们也可以使用Dans l'exemple précédent, nous avons utilisé un tableau comme source de données, dans l'exemple suivant, nous utiliserons un objet comme source de données.-repeat 指令来创建下拉列表：

Exemple en ligne

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

Dans l'exemple précédent, nous avons utilisé un tableau comme source de données, dans l'exemple suivant, nous utiliserons un objet comme source de données.-repeat 指令是通过数组来循环 HTML 代码来创建下拉列表，但 Dans l'exemple précédent, nous avons utilisé un tableau comme source de données, dans l'exemple suivant, nous utiliserons un objet comme source de données.-ng 指令更适合创建下拉列表，它有以下优势：

使用 Dans l'exemple précédent, nous avons utilisé un tableau comme source de données, dans l'exemple suivant, nous utiliserons un objet comme source de données.-ng 的选项是一个对象， Dans l'exemple précédent, nous avons utilisé un tableau comme source de données, dans l'exemple suivant, nous utiliserons un objet comme source de données.-repeat 是一个字符串。

应该用哪个更好?

假设我们使用以下对象:

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

Dans l'exemple précédent, nous avons utilisé un tableau comme source de données, dans l'exemple suivant, nous utiliserons un objet comme source de données.-repeat 有局限性，选择的值是一个字符串:

Exemple en ligne

使用 Dans l'exemple précédent, nous avons utilisé un tableau comme source de données, dans l'exemple suivant, nous utiliserons un objet comme source de données.-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>选择网站:</p>
<select ng-model="selectedSite">
<option　ng-repeat="x　in　sites"　value="{{x.url}}">{{x.site}}</option>
</select>
<h1>你选择的是:　{{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:\":}//fr.oldtoolbag.com",}
　　　　　　　　{site　:　"Taobao",　url　:　"http:\":}//www.taobao.com"}
　　　　www.taobao.com"}
});
</script>
];-repeat　指令来创建下拉列表，选中的值是一个字符串。</p>
</body>
</html>
测试看看 ‹/›

使用 Dans l'exemple précédent, nous avons utilisé un tableau comme source de données, dans l'exemple suivant, nous utiliserons un objet comme source de données.-ng 指令，选择的值是一个对象：

Exemple en ligne

使用 Dans l'exemple précédent, nous avons utilisé un tableau comme source de données, dans l'exemple suivant, nous utiliserons un objet comme source de données.-ng:

<!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-<p>Le site sélectionné est :<-options="x.site　for　x　in　sites">
</select>
<h1>你选择的是:　{{selectedSite.site}}</h1>
<p>网址为:　{{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:\":}//fr.oldtoolbag.com",}
　　　　　　　　{site　:　"Taobao",　url　:　"http:\":}//www.taobao.com"}
　　　　www.taobao.com"}
});
</script>
];-<p>Cette instance montre l'utilisation de ng/p>
</body>
</html>
测试看看 ‹/›

L'instruction options pour créer une liste déroulante, la valeur sélectionnée est un objet.<

Quand la valeur sélectionnée est un objet, nous pouvons obtenir plus d'informations et l'application est plus flexible.

Source de données pour l'objet

<p>Cette instance montre l'utilisation de l'objet pour créer une liste déroulante.<
　　　　codebox",1　$scope.sites = {
　　　　codebox",2　: "Google",3: "w
　　　　codebox",3　site0
: "Taobao"

Dans l'exemple précédent, nous avons utilisé un tableau comme source de données, dans l'exemple suivant, nous utiliserons un objet comme source de données.-ng options

Exemple en ligne

Utiliser un objet présente de grandes différences, comme montré ci-dessous : Utilisez l'objet comme source de données,</ xPour la clé (key), y

<!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">
Pour la valeur (value):/p>
<select ng-<p>Le site sélectionné est :<-model="selectedSite" ng
</select>
<h1options="x pour (x, y) dans sites">/h1>
</div>
>La valeur que vous avez choisie est : {{selectedSite}}</p>
<script>
var　app　=　angular.module('myApp',　[]);
app.controller('myCtrl',　function($scope)　{
　　　　<p>Cette instance montre l'utilisation de l'objet pour créer une liste déroulante.<
　　　　　　　　codebox",1　$scope.sites = {
　　　　　　　　codebox",2　: "Google",3: "w
　　　　　　　　codebox",3　site0
　　　　: "Taobao"
});
</script>
</body>
</html>
测试看看 ‹/›

};-value La valeur que vous avez choisie est dans la clé valuedans

value 。-value dans la clé

Exemple en ligne

La valeur sélectionnée se trouve dans la clé-value 对的 value C'est-à-dire qu'il s'agit d'un objet :

<!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>Choisissez une voiture :</p>
<select ng-model="selectedCar" ng-options="x pour (x, y) dans cars">
</select>
<h1>Vous avez choisi : {{selectedCar.brand}}</h1>
<h2>Modèle: {{selectedCar.model}}</h2>
<h3>Couleur: {{selectedCar.color}}</h3>
<p>Attention, la valeur sélectionnée est un objet.</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>
测试看看 ‹/›

Dans le menu déroulant, vous pouvez également ne pas utiliserkey-value dans 　key , utilisez directement les propriétés de l'objet :

Exemple en ligne

<!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>Choisissez une voiture :</p>
<select ng-model="selectedCar" ng-options="y.brand pour (x, y) dans 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