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

AngularJS 기본 강의

AngularJS 선택(선택 상자)

AngularJS는 배열이나 객체를 사용하여 드롭다운 목록 옵션을 생성할 수 있습니다.

를 사용하여 드롭다운 목록을 생성할 수 있습니다.-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',　[]);
app.controller('myCtrl', function($scope) {
　　　　$scope.names　=　["Baidu",　"w3codebox",　"Taobao"];
]);/script>

ng-init을 사용하여 기본 선택 값을 설정할 수 있습니다。}

ng-options와 ng-repeat

또한 사용할 수 있습니다ng-repeat 명령어를 사용하여 드롭다운 목록을 생성합니다：

在线示例

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

ng-repeat 명령어는 배열을 통해 HTML 코드를 반복하여 드롭다운 목록을 생성하지만 ng-options 명령어는 드롭다운 목록을 생성하는 데 더 적합합니다. 다음과 같은 장점이 있습니다：

사용 ng-options 의 옵션은 객체입니다, ng-repeat 는 문자열입니다.

어느 것이 더 좋을까요?

다음과 같은 객체를 사용하면 어떻게 될까요?:

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

ng-repeat 제한적입니다. 선택한 값은 문자열입니다:

在线示例

사용 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>웹사이트 선택:/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:\":}//ko.oldtoolbag.com",}
　　　　　　　　{site　:　"Taobao",　url　:　"http:\":}//www.taobao.com"}
　　　　];
});
</script>
<p>该实例演示了使用　ng-repeat　명령어를 사용하여 드롭다운 목록을 생성합니다. 선택한 값은 문자열입니다.</p>
</body>
</html>
테스트 보기 ‹/›

사용 ng-options 명령어를 사용하면, 선택한 값은 객체입니다：

在线示例

사용 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>웹사이트 선택:/p>
<select ng-model="selectedSite" ng-options="x.site　for　x　in　sites">
</select>
<h1>선택하신 것은:　{{selectedSite.site}}</h1>
<p>URL은:　{{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:\":}//ko.oldtoolbag.com",}
　　　　　　　　{site　:　"Taobao",　url　:　"http:\":}//www.taobao.com"}
　　　　];
});
</script>
<p>该实例演示了使用　ng-options　　지시자를 사용하여 드롭다운 목록을 생성하면, 선택된 값이 객체입니다.</p>
</body>
</html>
테스트 보기 ‹/›

当选择值是一个对象时，我们就可以获取更多信息，应用也更灵活。

数据源为对象

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

$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