ng-options의 키-값 쌍

ng-options의 키-값 쌍

---

AngularJS 를 사용하는 옵션의 데이터 소스로 연관 배열 을 사용해야합니다 select.

이와 같은 배열을 사용할 수 있습니까?

{
    "key1": "val1",
    "key2": "val2",
    "key3": "val3",
    ...
}

다음과 같은 것을 얻습니다.

<select>
    <option value="key1">val1</option>
    <option value="key2">val2</option>
    <option value="key3">val3</option>
    ...
</select>

나는 문서를 읽었 지만 이것을 달성하는 방법을 이해할 수 없습니다.

---

사용 ng-option:

<select ng-model="blah" ng-options="key as value for (key , value) in data"></select>

또는 사용 ng-repeat:

<select>
    <option ng-repeat="(key, value) in data" value="{{key}}">{{value}}</option>
</select>

컨트롤러의 데이터 :

$scope.data = {
    "key1": "val1",
    "key2": "val2",
    "key3": "val3",
    ...
};

---

다음 기사에서는 ngOptions를 사용할 수있는 다양한 방법에 대해 설명합니다 (지금까지 제가 본 것 중 가장 명확하고 철저한 설명). http://www.undefinednull.com/2014/08/11/a-brief-walk -ngularjs에서 옵션을 통해

---

Chen-Tsu Lin의 답변은 실제로 객체에 액세스하는 두 가지 방법을 제공합니다. 몇 줄만 더 추가하고 싶습니다.

ng-repeat지시문은 배열의 각 항목에 대해 HTML 코드 블록을 반복 하기 때문에 드롭 다운 목록에서 옵션을 만드는 데 사용할 수 있지만,이 ng-options지시문은 특히 드롭 다운 목록을 옵션으로 채우는 데 사용되며 적어도 한 가지 중요한 이점이 있습니다.

로 만든 드롭 다운을 ng-options사용하면 선택한 값이 개체가 될 수있는 반면 만든 드롭 다운은 ng-repeat문자열이어야합니다.

참조에 대한 예 추가 :

ng-repeat: http://www.w3schools.com/angular/tryit.asp?filename=try_ng_select_repeat_selected

ng-options: http://www.w3schools.com/angular/tryit.asp?filename=try_ng_select_object

전체 참조는 http://www.w3schools.com/angular/angular_select.asp로 이동 하십시오.

참고 URL : https://stackoverflow.com/questions/21734524/key-value-pairs-in-ng-options