AngularJS의 ng-options에서 값 속성을 설정하는 방법

질문 : AngularJS의 ng-options에서 값 속성을 어떻게 설정합니까?

---

(나를 포함하여) 많은 사람들을 괴롭히는 것 같습니다.

ng-options <select> 태그에 대한 옵션을 채울 때 옵션 값을 설정하는 방법을 알 수 없습니다. 이것에 대한 문서는 정말 불분명합니다-적어도 저와 같은 멍청이에게는.

옵션에 대한 텍스트를 다음과 같이 쉽게 설정할 수 있습니다.

ng-options="select p.text for p in resultOptions"

resultOptions 가 다음과 같은 경우 :

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

옵션 값을 설정하는 것이 가장 간단해야하지만 지금까지는 이해하지 못했습니다.

답변

---

ngOptions 참조

ngOptions (선택 사항) – { comprehension_expression= } – 다음 형식 중 하나 :

배열 데이터 소스의 경우 : select as label for value in array label for value in array label group by group for value in array select as label group by group for value in array track by trackexpr 객체 데이터 소스의 경우 : label for (key , value) in object select as label for (key , value) in object label group by group for (key, value) in object select as label group by group for (key, value) in object

귀하의 경우에는

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

<select ng-options="obj.value as obj.text for obj in array"></select>

수정

AngularJS의 업데이트를 통해 이제 식별 track by select 요소 value 속성에 대한 실제 값을 설정할 수 있습니다.

<select ng-options="obj.text for obj in array track by obj.value">
</select>

 

어떻게 이것들을 기억하는가

이 구문 형식을 기억하는 데 어려움을 겪고있는 모든 사람들에게 : 이것이 가장 쉽고 아름다운 구문이 아니라는 데 동의합니다. 이 구문은 파이썬의 목록 이해의 확장 된 버전이며 구문을 매우 쉽게 기억하는 데 도움이됩니다. 다음과 같습니다.

Python 코드 :

my_list = [x**2 for x in [1, 2, 3, 4, 5]]
> [1, 4, 9, 16, 25]

# Let people to be a list of person instances
my_list2 = [person.name for person in people]
> my_list2 = ['Alice', 'Bob']

이것은 실제로 위에 나열된 첫 번째 구문과 동일한 구문입니다. 그러나 <select> <select> 요소에 표시된 텍스트 (레이블)를 구분해야합니다.

person.id 가 필요하지만 사용자에게 id 를 표시하고 싶지는 않습니다. 우리는 그 이름을 보여주고 싶습니다. 마찬가지로 코드 person.name 에는 관심이 없습니다. 온다 as 라벨 물건에 키워드. 따라서 다음과 같이됩니다.

person.id as person.name for person in people

또는 person.id person 인스턴스 / 참조 자체가 필요할 수 있습니다. 아래를 참조하십시오.

person as person.name for person in people

JavaScript 객체의 경우에도 동일한 방법이 적용됩니다. (key, value) 쌍으로 분해된다는 것을 기억하십시오.

출처 : https://stackoverflow.com/questions/12139152/how-do-i-set-the-value-property-in-angularjs-ng-options