AngularJS #14 - Select Boxes

✔ AngularJS Select Boxes

 > array or object를 가지고 dropdown list를 만들 수 있게 해준다

 

1. Creating a Select Box Using ng-options

 > dropdown list를 만들때 ng-options directive를 이용해야한다

<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 = ["Kim", "Lee", "Park"];
 });
</script>

 

2. ng-options vs ng-repeat

 > ng-repeat을 이용해서 똑같은 것을 만들 수 있다

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

 : ng-repeat directive는 HTML 코드 덩어리를 반복해서 dropdown list를 만들 수 있다. 그러나 ng-options directive는 dropdown list를 만들기 위해 특별히 만들어졌다

 

3. 어떤걸 이용해야하는가

 > ng-repeat, ng-options 둘다 사용할 수 있음

$scope.cars = [
 {model: "Hyundai Sonata", color: "red"}
 ,{model: "Kia Sorento", color: "white"}
 ,{model: "Volvo xc90", color: "gray"}
];

 이런 object array를 가지고 있다고 했을 때,

 

 > ng-repeat

<select ng-model="selectedCar">
 <option ng-repeat="x in cars" value="{{x.model}}">{{x.model}}</option>
</select>

<h1>You selected: {{selectedCar}}</h1>

 : value를 object로 쓸때는 value가 아니라 ng-value를 써야함

<select ng-model="selectedCar">
 <option ng-repeat="x in cars" ng-value="{{x}}">{{x.model}}</option>
</select>

<h1>You selectd 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>

 : 선택된 값이 object면 더 많은 data를 가지고 있을 수 있어서 application이 좀 더 유연해질 수 있다

 

 

4. The Data Source as an Object

 > 이번에는 데이터 소스를 object로 해서 한번 해보자

$scope.cars = {
 car01 : "Hyundai",
 car02 : "Kia",
 car03 : "Volvo"
};

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

<h1>You selected: {{selectedCar}}</h1>

 : 선택된 값은 항상 key-value에서 value이다

$scope.cars = {
 car01: {brand: "Hyundai", model: "Sonata", color: "red"},
 car02: {brand: "Kia", model: "Sorento", color: "gray"},
 car03: {brand: "Volvo", model: "xc90", color: "white"}
};

 

 > dropdown list에서의 option이 항상 key-value에서 key일 필요는 없다

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

 

 

 

 

 

 

 

** 위 글은 w3schools.com에 있는 내용을 한국어로 번역하여 적어둔 글입니다.

- https://www.w3schools.com/angular/angular_select.asp

Angular Select Boxes