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-repeat지시어를 사용하여 동일한 드롭다운 목록을 만들 수도 있습니다 .
예시
<select>
<option ng-repeat="x in names">{{x}}</option>
</select>
지시문은 배열의 각 항목에 대해 HTML 코드 블록을 반복 하기 때문에 ng-repeat드롭다운 목록에서 옵션을 만드는 데 사용할 수 있지만 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">
<option ng-repeat="x in cars" value="{{x.model}}">{{x.model}}</option>
</select>
<h1>You selected: {{selectedCar}}</h1>
값을 객체로 사용할 때는 다음 대신 사용 ng-value하십시오 value.
예시
개체로 사용 ng-repeat:
<select ng-model="selectedCar">
<option ng-repeat="x in cars" ng-value="{{x}}">{{x.model}}</option>
</select>
<h1>You selected a {{selectedCar.color}} {{selectedCar.model}}</h1>
예시
사용 ng-options:
<select ng-model="selectedCar" ng-options="x.model for x in cars">
</select>
<h1>You selected: {{selectedCar.model}}</h1>
<p>Its color is: {{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>You selected: {{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>