여기에 나를 포함한 많은 사람들을 괴롭히는 것 같습니다.

ng-optionsAngularJS 에서 지시문을 사용하여 <select>태그 의 옵션을 채울 때 옵션 값을 설정하는 방법을 알 수 없습니다. 이것에 대한 문서는 실제로 명확하지 않습니다. 적어도 저와 같은 단순한 것입니다.

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

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

resultOptions예를 들면 언제 입니까?

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

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

ngOptions 참조

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

배열 데이터 소스의 경우 : label for value in array select as 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의 업데이트를 통해 이제 expression을 사용 value하여 select요소 의 속성에 대한 실제 값을 설정할 수 있습니다 track by.

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

이 못생긴 것들을 기억하는 법

이 구문 양식을 기억하기 어려운 모든 사람들에게 나는 이것이 가장 쉬운 구문이 아니라는 데 동의합니다. 이 문법은 일종의 파이썬 목록 이해의 확장 버전이며 구문을 매우 쉽게 기억하는 데 도움이됩니다. 다음과 같습니다.

파이썬 코드 :

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)쌍으로 구성 되어 있음을 기억하십시오 .

값 속성이 값을 얻는 방법 :

• 배열을 데이터 소스로 사용하는 경우 각 반복에서 배열 요소의 색인이됩니다.
• 객체를 데이터 소스로 사용하는 경우 각 반복에서 속성 이름이됩니다.

따라서 귀하의 경우에는 다음과 같아야합니다.

obj = { '1': '1st', '2': '2nd' };

<select ng-options="k as v for (k,v) in obj"></select>

나는이 문제도 가지고 있었다. ng-options에서 내 가치를 설정할 수 없었습니다. 생성 된 모든 옵션은 0, 1, ..., n으로 설정되었습니다.

올바르게하기 위해 ng-options에서 다음과 같이했습니다.

HTML :

<select ng-options="room.name for room in Rooms track by room.price">
    <option value="">--Rooms--</option>
</select>

"track by"를 사용하여 모든 값을로 설정했습니다 room.price.

(이 예제는 짜증납니다. 가격이 둘 이상인 경우 코드가 실패하므로 다른 값을 가져야합니다.)

JSON :

$scope.Rooms = [
            { name: 'SALA01', price: 100 },
            { name: 'SALA02', price: 200 },
            { name: 'SALA03', price: 300 }
        ];

블로그 게시물에서 Angular.JS ng-options & track by를 사용하여 선택 요소의 초기 선택된 값을 설정하는 방법 에서 배웠습니다 .

비디오를보십시오. 좋은 수업입니다 :)

option양식 대신 서버에 양식이 제출되므로 요소 값을 변경하려는 경우 ,

<select name="text" ng-model="text" ng-options="select p.text for p in resultOptions"></select>

당신은 이것을 할 수 있습니다 :

<select ng-model="text" ng-options="select p.text for p in resultOptions"></select>
<input type="hidden" name="text" value="{{ text }}" />

그러면 예상 값이 올바른 이름으로 양식을 통해 전송됩니다.

my_hero일반 양식 제출을 사용하여 서버에 호출 된 사용자 정의 값을 보내려면 다음 을 수행하십시오.

JSON :

"heroes": [
  {"id":"iron", "label":"Iron Man Rocks!"},
  {"id":"super", "label":"Superman Rocks!"}
]

HTML :

<select ng-model="hero" ng-options="obj.id as obj.label for obj in heroes"></select>
<input type="hidden" name="my_hero" value="{{hero}}" />

서버는 iron또는 super값 중 하나를받습니다 my_hero.

이것은 @neemzy의 답변 과 비슷 하지만 value속성에 별도의 데이터를 지정 합니다.

그 표시 ng-options사용에 (아마도 실망) 복잡하지만, 현실에서 우리는 아키텍처 문제가 있습니다.

AngularJS는 동적 HTML + 자바 스크립트 애플리케이션을위한 MVC 프레임 워크 역할을합니다. (V) iew 구성 요소는 HTML "템플릿"을 제공하지만, 주된 목적은 컨트롤러를 통해 사용자 조치를 모델의 변경 사항에 연결하는 것입니다. 따라서 AngularJS에서 작동하는 적절한 추상화 레벨은 select 요소가 모델의 값을 쿼리의 값으로 설정한다는 것 입니다.

• 쿼리 행이 사용자에게 표시되는 방법은 (V) ie 의 관심사이며 옵션 요소의 내용이 무엇인지 지정 ng-options하는 for키워드를 제공합니다 . p.text for p in resultOptions
• 선택된 행이 서버에 표시되는 방법은 (M) odel의 관심사입니다. 따라서 에서와 같이 모델에 제공되는 값을 지정 ng-options하는 as키워드를 제공합니다 k as v for (k,v) in objects.

이 문제가 올바른 해결책은 본질적으로 구조적이며 HTML을 리팩터링하여 (M) odel 이 사용자가 양식을 제출하는 대신 필요할 때 서버 통신을 수행하도록합니다 .

MVC HTML 페이지가 현재 문제에 대해 과도한 엔지니어링이 필요하지 않은 경우 : AngularJS (V) ie 구성 요소의 HTML 생성 부분 만 사용하십시오. 이 경우, 같은 요소를 생성하기 위해 사용되는 동일한 패턴을 따르는 <li />의 언더 <ul />들 '및 선택 요소에 NG 반복 배치 :

<select name=“value”>
    <option ng-repeat=“value in Model.Values” value=“{{value.value}}”>
        {{value.text}}
    </option>
</select>

으로 kludge , 하나는 항상 숨겨진 입력 요소에 선택 요소의 이름 속성을 이동할 수 있습니다 :

<select ng-model=“selectedValue” ng-options=“value.text for value in Model.Values”>
</select>
<input type=“hidden” name=“value” value=“{{selectedValue}}” />

당신은 이것을 할 수 있습니다 :

<select ng-model="model">
    <option value="">Select</option>
    <option ng-repeat="obj in array" value="{{obj.id}}">{{obj.name}}</option>
</select>

-업데이트

일부 업데이트 후 사용자 frm.adiputra 의 솔루션 이 훨씬 좋습니다. 암호:

obj = { '1': '1st', '2': '2nd' };
<select ng-options="k as v for (k,v) in obj"></select>

나는 오늘이 문제로 고생했다. 나는 AngularJS 문서,이 게시물 및 다른 게시물과 그들이 이끄는 몇 가지 블로그를 읽었습니다. 그들은 모두 세밀한 세부 사항을 파악하는 데 도움이되었지만 결국 혼란스러운 주제 인 것 같습니다. 주로의 구문 상 뉘앙스 때문에 ng-options.

결국, 나를 위해, 그것은 더 적게 내려왔다.

다음과 같이 구성된 범위가 주어집니다.

        //Data used to populate the dropdown list
        $scope.list = [
           {"FirmnessID":1,"Description":"Soft","Value":1},         
           {"FirmnessID":2,"Description":"Medium-Soft","Value":2},
           {"FirmnessID":3,"Description":"Medium","Value":3}, 
           {"FirmnessID":4,"Description":"Firm","Value":4},     
           {"FirmnessID":5,"Description":"Very Firm","Value":5}];

        //A record or row of data that is to be save to our data store.
        //FirmnessID is a foreign key to the list specified above.
        $scope.rec = {
           "id": 1,
           "FirmnessID": 2
        };

이것이 원하는 결과를 얻는 데 필요한 전부입니다.

        <select ng-model="rec.FirmnessID"
                ng-options="g.FirmnessID as g.Description for g in list">
            <option></option>
        </select>   

사용하지 않았습니다 track by. track by선택한 항목을 사용 하면 FirmnessID 자체가 아닌 FirmnessID와 일치하는 개체가 항상 반환됩니다. 이제 객체가 아닌 숫자 값을 반환하고 ng-options생성 된 각 옵션에 대해 새 범위를 만들지 않으면 서 제공하는 성능 향상을 얻는 데 사용해야한다는 내 기준을 충족 합니다.

나는 단순히 추가, 그래서 또한, 나는 빈 첫 번째 행을 필요로 <option>받는 <select>요소입니다.

여기 내 작품을 보여주는 Plunkr 가 있습니다.

새로운 '트랙 바이'기능을 사용하는 대신 값을 텍스트와 동일하게하려면 배열을 사용하여 간단히 수행 할 수 있습니다.

<select ng-options="v as v for (k,v) in Array/Obj"></select>

표준 구문의 차이점에 유의하십시오. 이는 값을 객체 / 배열의 키로 만들고 따라서 배열에 대해 0,1,2 등을 만듭니다.

<select ng-options"k as v for (k,v) in Array/Obj"></select>

k as v 는 v 가 v로됩니다 .

나는 구문을보고 상식을 바탕으로 이것을 발견했습니다. (k, v)는 배열 / 객체를 키 값 쌍으로 나누는 실제 명령문입니다.

'k as v'문에서 k는 값이고 v는 사용자에게 표시되는 텍스트 옵션입니다. 나는 '추적'이 지저분하고 과도하다고 생각합니다.

이것은 나에 따라 모든 시나리오에 가장 적합했습니다.

<select ng-model="mySelection.value">
   <option ng-repeat="r in myList" value="{{r.Id}}" ng-selected="mySelection.value == r.Id">{{r.Name}}
   </option>
</select>

모델을 사용하여 데이터를 바인딩 할 수 있습니다. 객체에 포함될 값과 시나리오에 따른 기본 선택을 얻을 수 있습니다.

이것이 내가 이것을 해결 한 방법입니다. 선택 기준 값을 추적하고 선택한 항목 속성을 JavaScript 코드의 모델로 설정했습니다.

Countries =
[
    {
        CountryId = 1, Code = 'USA', CountryName = 'United States of America'
    },
    {
       CountryId = 2, Code = 'CAN', CountryName = 'Canada'
    }
]

<select ng-model="vm.Enterprise.AdminCountry" ng-options="country.CountryName for country in vm.Countries track by country.CountryId">

vm내 컨트롤러이고 서비스에서 검색된 컨트롤러의 국가는 {CountryId =1, Code = 'USA', CountryName='United States of America'}입니다.

선택 드롭 다운에서 다른 국가를 선택하고 "저장"으로 내 페이지를 게시했을 때 올바른 국가를 찾았습니다.

ng-options지시어는의 값 속성을 설정하지 않습니다 <options>배열의 요소를 :

사용 limit.value as limit.text for limit in limits하는 수단 :

설정된 <option>로의 라벨을 limit.text
저장 limit.value선택의에 값ng-model

스택 오버플로 질문 AngularJS ng 옵션이 값을 렌더링하지 않음을 참조하십시오 .

<select ng-model="color" ng-options="(c.name+' '+c.shade) for c in colors"></select><br>

ng-options를 사용하여 값에 태그를 바인딩하고 멤버를 표시 할 수 있습니다.

이 데이터 소스를 사용하는 동안

countries : [
              {
                 "key": 1,
                 "name": "UAE"
             },
              {
                  "key": 2,
                  "name": "India"
              },
              {
                  "key": 3,
                  "name": "OMAN"
              }
         ]

아래를 사용하여 선택 태그를 값과 이름에 바인딩 할 수 있습니다

<select name="text" ng-model="name" ng-options="c.key as c.name for c in countries"></select>

그것은 잘 작동합니다

frm.adiputra 사용자 가이 질문에 대한 정답을 제공했습니다. 현재 옵션 요소의 value 속성을 명시 적으로 제어하는 ​​유일한 방법 인 것 같습니다.

그러나 저는이 문맥에서 "select"가 키워드가 아니라 표현의 자리 표시 자임을 강조하고 싶었습니다. ng-options 지시문에서 사용할 수있는 다른 표현식뿐만 아니라 "select"표현식의 정의에 대해서는 다음 목록을 참조하십시오.

질문에 묘사 된 바와 같이 select 사용 :

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

본질적으로 잘못되었습니다.

표현식 목록에 따라 옵션이 객체 배열에 제공 될 때 trackexpr 을 사용하여 값을 지정할 수 있지만 그룹화에만 사용 된 것 같습니다.

ng-options에 대한 AngularJS의 문서에서 :

• array / object : 반복 할 배열 / 객체로 평가되는 표현식입니다.
• value : 배열의 각 항목 또는 반복하는 동안 객체의 각 속성 값을 참조하는 로컬 변수입니다.
• key : 반복하는 동안 객체의 속성 이름을 나타내는 로컬 변수입니다.
• label :이 표현식의 결과는 element의 레이블입니다. 표현식은 대부분 값 변수 (예 : value.propertyName)를 나타냅니다.
• select :이 표현식의 결과는 상위 요소의 모델에 바인딩됩니다. 지정하지 않으면 선택 표현식이 기본값으로 설정됩니다.
• group :이 표현식의 결과는 DOM 요소를 사용하여 옵션을 그룹화하는 데 사용됩니다.
• trackexpr : 객체 배열로 작업 할 때 사용됩니다. 이 표현식의 결과는 배열의 객체를 식별하는 데 사용됩니다. trackexpr은 대부분 value 변수 (예 : value.propertyName)를 참조합니다.

ng-options에서 항목을 선택하는 것은 데이터 소스 설정 방법에 따라 약간 까다로울 수 있습니다.

잠시 동안 그들과 함께 고군분투 한 후에 나는 내가 사용하는 가장 일반적인 데이터 소스로 샘플을 만들었습니다. 여기에서 찾을 수 있습니다.

http://plnkr.co/edit/fGq2PM?p=preview

이제 ng-options가 작동하도록하기 위해 고려해야 할 사항이 있습니다.

1. 일반적으로 한 소스에서 옵션을 선택하고 다른 소스에서 선택한 값을 얻습니다. 예를 들면 다음과 같습니다.
   • 상태 :: ng-options 데이터
   • user.state :: 선택된 옵션
2. 1을 기준으로 가장 쉬운 / 논리적 인 작업은 선택을 하나의 소스로 채운 다음 선택한 값 트로프 코드를 설정하는 것입니다. 혼합 된 데이터 세트를 얻는 것이 더 나을 것입니다.
3. AngularJS를 사용하면 선택 컨트롤이 개 이상 보유 할 수 있습니다 key | label. 많은 온라인 예제는 객체를 '키'로 설정하고 객체의 정보가 그렇게 설정되면 필요한 특정 속성을 키로 사용하십시오. (plckr 샘플에서와 같이 ID, CODE 등)

4. 드롭 다운 / 선택 컨트롤의 값을 설정하는 방법은 # 3,

   • 드롭 다운 키가 단일 속성 (plunkr의 모든 예제 에서처럼) 인 경우 다음과 같이 설정하면됩니다. $scope.dropdownmodel = $scope.user.state;

   • 객체를 키로 설정하면 옵션을 통해 루프해야합니다. 객체를 할당해도 다른 해시 키가 있으므로 선택한 항목을 선택하지 않습니다.

     for (var i = 0, len = $scope.options.length; i < len; i++) {
       if ($scope.options[i].id == savedValue) { // Your own property here:
         console.log('Found target! ');
         $scope.value = $scope.options[i];
         break;
       }
     }

다른 객체의 동일한 속성에 대해 savedValue를 바꿀 수 있습니다 $scope.myObject.myProperty.

저에게 Bruno Gomes의 답변 이 가장 좋습니다.

그러나 실제로는 선택 옵션의 value 속성 설정에 대해 걱정할 필요가 없습니다. AngularJS가이를 처리합니다. 자세히 설명하겠습니다.

이 바이올린을 고려하십시오

angular.module('mySettings', []).controller('appSettingsCtrl', function ($scope) {

    $scope.timeFormatTemplates = [{
        label: "Seconds",
        value: 'ss'
    }, {
        label: "Minutes",
        value: 'mm'
    }, {
        label: "Hours",
        value: 'hh'
    }];


    $scope.inactivity_settings = {
        status: false,
        inactive_time: 60 * 5 * 3, // 15 min (default value), that is, 900 seconds
        //time_format: 'ss', // Second (default value)
        time_format: $scope.timeFormatTemplates[0], // Default seconds object
    };

    $scope.activity_settings = {
        status: false,
        active_time: 60 * 5 * 3, // 15 min (default value), that is,  900 seconds
        //time_format: 'ss', // Second (default value)
        time_format: $scope.timeFormatTemplates[0], // Default seconds object
    };

    $scope.changedTimeFormat = function (time_format) {
        'use strict';

        console.log('time changed');
        console.log(time_format);
        var newValue = time_format.value;

        // do your update settings stuffs
    }
});

바이올린 출력에서 ​​볼 수 있듯이 선택 상자 옵션에 대해 선택하는 것은 사용자 정의 값이거나 AngularJS에 의해 0, 1, 2 자동 생성 값이므로 jQuery 또는 다른 것을 사용하지 않는 한 출력에 중요하지 않습니다. 다른 라이브러리는 해당 콤보 상자 옵션의 값에 액세스하고 그에 따라 조작합니다.

질문 1 년 후, 나는이 질문에 대한 답변이 적어도 나에게 실제 답변을 주었 으므로이 질문에 대한 답을 찾아야했습니다.

옵션을 선택하는 방법을 물었지만 아무도이 두 가지가 동일 하지 않다고 말하지 않았습니다 .

다음과 같은 옵션이있는 경우 :

$scope.options = [
    { label: 'one', value: 1 },
    { label: 'two', value: 2 }
  ];

그리고 우리는 다음과 같은 기본 옵션을 설정하려고합니다.

$scope.incorrectlySelected = { label: 'two', value: 2 };

그것은 것입니다 NOT 이 같은 옵션을 선택하려고하면 작동하지만 :

$scope.correctlySelected = $scope.options[1];

그것은 것입니다 WORK .

이 두 객체의 속성은 동일하지만 AngularJS는 참조로 비교하기 때문에 AngularJS는이를 DIFFERENT로 간주합니다 .

바이올린 http://jsfiddle.net/qWzTb/를 살펴보십시오 .

선택 상자에서 값과 레이블을 구분하는 속성 별 트랙을 사용하십시오.

시도하십시오

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

텍스트가있는 레이블과 값이있는 레이블을 할당합니다 (배열에서)

객체의 경우 :

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

개발자가 ng 옵션을 사용하는 것은 항상 고통 스럽습니다. 예를 들어 : select 태그에서 비어 있거나 비어있는 선택된 값을 가져옵니다. 특히 ng-options에서 JSON 객체를 다룰 때 더 지루합니다. 여기서 나는 그것에 대해 몇 가지 연습을했습니다.

목표 : ng-option을 통해 JSON 객체의 배열을 반복하고 선택된 첫 번째 요소를 설정합니다.

데이터:

someNames = [{"id":"1", "someName":"xyz"}, {"id":"2", "someName":"abc"}]

select 태그에서 나는 xyz와 abc를 보여 주어야했는데, 여기서 xyz는 많은 노력없이 선택되어야한다.

HTML :

<pre class="default prettyprint prettyprinted" style=""><code>
    &lt;select class="form-control" name="test" style="width:160px"    ng-options="name.someName for name in someNames" ng-model="testModel.test" ng-selected = "testModel.test = testModel.test || someNames[0]"&gt;
&lt;/select&gt;
</code></pre>

위의 코드 샘플에 따르면이 과장에서 벗어날 수 있습니다.

다른 참조 :

ANGULAR.JS : NG-SELECT 및 NG-OPTIONS 튜토리얼을 통해 문제를 해결했습니다.

<select id="countryId"
  class="form-control"
  data-ng-model="entity.countryId"
  ng-options="value.dataValue as value.dataText group by value.group for value in countries"></select>

<select ng-model="output">
   <option ng-repeat="(key,val) in dictionary" value="{{key}}">{{val}}</option>
</select>

코드 스 니펫을 실행하고 변형을 확인하십시오. 빠른 이해를위한 참고 사항입니다.

1. 예 1 (객체 선택) :- ng-option="os.name for os in osList track by os.id". 여기에서 track by os.id중요한 & 해야 거기 os.id as 안됩니다 전에 있습니다 os.name.

   • 는 ng-model="my_os"같은 키를 사용하여 객체에 설정해야 ID 와 같은 my_os={id: 2}.

2. 예 2 (값 선택) :- ng-option="os.id as os.name for os in osList". 여기 track by os.id 안됩니다 가하고 os.id as 있어야한다 전에이 os.name.

   • 는 ng-model="my_os"같은 값으로 설정해야합니다my_os= 2

나머지 코드 스 니펫이 설명합니다.

angular.module('app', []).controller('ctrl', function($scope, $timeout){
  
  //************ EXAMPLE 1 *******************
  $scope.osList =[
    { id: 1, name :'iOS'},
    { id: 2, name :'Android'},
    { id: 3, name :'Windows'}
  ]
  $scope.my_os = {id: 2};
  
  
  //************ EXAMPLE 2 *******************
  $timeout(function(){
    $scope.siteList = [
          { id: 1, name: 'Google'},
          { id: 2, name: 'Yahoo'},
          { id: 3, name: 'Bing'}
        ];
   }, 1000);
    
    $scope.my_site = 2;
  
    $timeout(function(){
      $scope.my_site = 3;
    }, 2000);
})

fieldset{
  margin-bottom: 40px;
  }
strong{
  color:red;
  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.10/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">

  <!--//************ EXAMPLE 1 *******************-->
  <fieldset>
    <legend>Example 1 (Set selection as <strong>object</strong>)</legend>
    
    <select ng-model="my_os" ng-options="os.name for os in osList track by os.id">
        <option value="">--Select--</option>
      </select>
    {{my_os}}
    
  </fieldset>
  
  
  <!--//************ EXAMPLE 2 *******************-->
  <fieldset>
    <legend>Example 2 (Set selection as <strong>value</strong>. Simulate ajax)</legend>
      <select ng-model="my_site" ng-options="site.id as site.name for site in siteList">
        <option value="">--Select--</option>
      </select>
      {{my_site}}
  </fieldset>
  
</div>

많은 사람들이 이전에 말했듯이, 이와 같은 데이터가 있다면 :

countries : [
              {
                 "key": 1,
                 "name": "UAE"
             },
              {
                  "key": 2,
                  "name": "India"
              },
              {
                  "key": 3,
                  "name": "OMAN"
              }
         ]

나는 그것을 다음과 같이 사용할 것이다 :

<select
    ng-model="selectedCountry"
    ng-options="obj.name for obj  in countries">
</select>

Controller에서 첫 번째 빈 항목을 제거하려면 초기 값을 설정해야합니다.

 $scope.selectedCountry = $scope.countries[0];

 // You need to watch changes to get selected value
 $scope.$watchCollection(function() {
   return $scope.selectedCountry
 }, function(newVal, oldVal) {
     if (newVal === oldVal) {
       console.log("nothing has changed " + $scope.selectedCountry)
     } 
     else {
       console.log('new value ' + $scope.selectedCountry)
     }
 }, true)

레거시 응용 프로그램에서이 문제를 해결하는 방법은 다음과 같습니다.

HTML에서 :

ng-options="kitType.name for kitType in vm.kitTypes track by kitType.id" ng-model="vm.itemTypeId"

자바 스크립트에서 :

vm.kitTypes = [
    {"id": "1", "name": "Virtual"},
    {"id": "2", "name": "Physical"},
    {"id": "3", "name": "Hybrid"}
];

...

vm.itemTypeId = vm.kitTypes.filter(function(value, index, array){
    return value.id === (vm.itemTypeId || 1);
})[0];

내 HTML은 옵션 값을 올바르게 표시합니다.

ngOptions 지시어 :

$scope.items = [{name: 'a', age: 20},{ name: 'b', age: 30},{ name: 'c', age: 40}];

• Case-1) 배열의 값 레이블 :

  <div>
      <p>selected item is : {{selectedItem}}</p>
      <p> age of selected item is : {{selectedItem.age}} </p>
      <select ng-model="selectedItem" ng-options="item.name for item in items">
      </select>
  </div>

출력 설명 (첫 번째 항목이 선택된 것으로 가정) :

selectedItem = {name : 'a', 나이 : 20} // [기본적으로 선택된 항목은 value 항목 과 같습니다 ]

selectedItem.age = 20

• 사례 2) 배열의 값 레이블로 선택하십시오.

  <div>
      <p>selected item is : {{selectedItem}}</p>
      <select ng-model="selectedItem" ng-options="item.age as item.name for item in items">
      </select>
  </div>

출력 설명 (첫 번째 항목이 선택된 것으로 가정) : selectedItem = 20 // [선택 부분은 item.age ]