AngularJS선택 박스

AngularJS와는 배열 또는 객체의 항목에 따라 드롭 다운 목록을 만들 수 있습니다.

NG-옵션을 사용하여 선택 상자 만들기

당신이 개체 또는 AngularJS와의 배열에 따라 드롭 다운 목록을 만들려면, 당신은 사용해야 ng-option 지시문을 :

예

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Emil", "Tobias", "Linus"];
});

</script>

»그것을 자신을 시도

NG 반복 대 NG-옵션

당신은 또한 사용할 수 있습니다 ng-repeat 같은 드롭 다운 목록을 만들기 위해 문을 :

예

»그것을 자신을 시도

때문에 ng-repeat 지시자는 배열의 각 항목에 대한 HTML 코드 블록 반복, 드롭 다운리스트에서 옵션을 생성하는데 사용될 수 있지만, ng-options 지시자 특히 옵션 드롭 다운리스트를 채우기 제조하고, 보유 적어도 하나의 중요한 이점 :

로 만든 드롭 다운 ng-options 에서 만든 드롭 다운 동안, 선택된 값은 객체가 될 수 있습니다 ng-repeat 문자열이어야한다.

나는 무엇을 사용합니까?

당신이 객체의 배열을 가지고 가정 :

$scope.cars = [
    {model : "Ford Mustang", color : "red"},
    {model : "Fiat 500", color : "white"},
    {model : "Volvo XC90", color : "black"}
];

ng-repeat 지시자는, 선택된 값은 문자열이어야합니다 그것의 제한이 있습니다 :

예

사용 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-options 지시문을 선택한 값은 객체가 될 수 있습니다 :

예

사용 ng-options :

<select ng-model="selectedCar" ng-options="x.model for x in cars">
</select>

<h1>You selected: {{selectedCar.model}}</h1>
<p>It's 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"}
};

»그것을 자신을 시도

키 - 값 쌍의 키를 수없는 드롭 다운리스트에서 옵션은 또한 값 또는 값 객체의 속성 일 수있다 :