AngularJS에 대한 ng-options의 값 설정

AngularJS의 ng-options 지시문을 사용하면 개발자가 태그에 대한 옵션을 채울 수 있습니다. 흔히 발생하는 질문 중 하나는 각 옵션의 값 속성을 설정하는 방법입니다.

값 설정 메커니즘을 이해하기 위해 ngOptions의 구문을 살펴보겠습니다. 다음 형식 중 하나로 표현식을 사용합니다.

배열의 경우:

label for value in array

객체의 경우:

label for (key, value) in object

다음 예제 배열을 고려하십시오.

array = [{ "value": 1, "text": "1st" }, { "value": 2, "text": "2nd" }];

ng-options를 사용하여 옵션을 채우려면 다음과 같이 작성할 수 있습니다.

이 경우 obj.value는 각 옵션에 대해 선택된 값을 결정합니다.

업데이트: 값 표현식으로 추적

최근 AngularJS 업데이트를 통해 이제 표현식으로 추적을 사용하여 값 속성의 값을 명시적으로 지정할 수 있습니다:

구문 기억하기

ngOptions 구문은 기억하기 어려울 수 있습니다. 유용한 비유는 이를 Python의 목록 이해의 확장된 버전으로 생각하는 것입니다:

[x**2 for x in [1, 2, 3, 4, 5]]

그러나 ng-options에서는 as 키워드를 사용하여 각 옵션에 대해 표시되는 텍스트와 값을 구별합니다.

person.id as person.name for person in people

JavaScript 객체의 경우, 구문은 (키, 값) 쌍을 사용하여 비슷합니다.

for (key, value) in object