AngularJS 드롭다운 박스

AngularJS는 배열이나 객체 내의 항목을 기반으로 드롭다운 목록을 생성할 수 있습니다.

ng-options를 사용하여 드롭다운 박스 생성

AngularJS에서 객체나 배열을 기반으로 드롭다운 목록을 생성하려면, 사용해야 합니다 ng-options 지시:

예제

<div ng-app="myApp" ng-controller="myCtrl">
<select 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 = ["Emil", "Tobias", "Linus"];
);
</script>

직접 시도해보세요

ng-options와 ng-repeat

또한 사용할 수 있습니다 ng-repeat 동일한 드롭다운 목록을 생성하기 위해 지시를 사용할 수 있습니다:

예제

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

직접 시도해보세요

그러나 ng-repeat 지시는 배열 내의 각 항목에 대해 일단 HTML 코드를 반복하므로, 드롭다운 목록에서 옵션을 생성하는 데 사용할 수 있지만 ng-options 지시는 드롭다운 목록에选项을 채우기 위해 특별히 설계되었습니다.

哪一个应该使用？

사용할 수 있습니다. ng-repeat 지시와 ng-options 지시:

假设您有一个对象数组：

假设您有一个对象数组：
  $scope.cars = [
  {model : "Ford Mustang", color : "red"},
  {model : "Fiat 500", color : "white"},
{model : "Volvo XC90", color : "black"}

예제

사용 ng-repeat：

<select ng-model="selectedCar">
  ];
</select>
<h1>선택하신 것: {{selectedCar}}</h1>

직접 시도해보세요

<option ng-repeat="x in cars" value="{{x.model}}">{{x.model}}</option> 값을 객체로 사용할 때, 다음을 사용하면 됩니다: ng-value 대신：

예제

value ng-repeat 객체로 사용하면

<select ng-model="selectedCar">
  <option ng-repeat="x in cars" ng-value="{{x}}">{{x.model}}</option>
</select>
<h1>선택하신 것은 {{selectedCar.color}} {{selectedCar.model}}</h1>

직접 시도해보세요

예제

사용 ng-options：

<select ng-model="selectedCar" ng-options="x.model for x in cars">
</select>
<h1>선택하신 것: {{selectedCar.model}}</h1>
<p>그 색상은: {{selectedCar.color}}</p>

직접 시도해보세요

선택된 값이 객체일 때, 더 많은 정보를 포함할 수 있으며, 애플리케이션이 더 유연해질 수 있습니다.

이 튜토리얼에서 사용할 것입니다 ng-options 지시어.

객체 데이터 소스로 사용

이전 예제에서 데이터 소스는 배열이었지만, 객체도 사용할 수 있습니다.

키밸류의 객체가 있다고 가정해 보겠습니다:

$scope.cars = {
  car01 : "Ford",
  car02 : "Fiat",
  car03 : "Volvo"
};

ng-options 객체에 대한 표현식은 약간 다릅니다:

예제

객체를 데이터 소스로 사용하면x 대표 키:y 대표 값:

<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>
<h1>선택하신 것: {{selectedCar}}</h1>

직접 시도해보세요

선택된 값은 항상 키밸류의값입니다.

키밸류의값객체도 될 수 있습니다:

예제

선택된 값은 여전히 키밸류의값이번에는 객체입니다:

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

직접 시도해보세요

드롭다운 목록의 옵션은 키밸류 페어에서는 아닌 필요가 없습니다키그리고 이 값 또는 값 객체의 속성일 수도 있습니다:

예제

<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars">
</select>

직접 시도해보세요