Programing

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

crosscheck 2020. 10. 4. 10:31
반응형

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

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

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의 업데이트를 통해 이제 표현식을 사용 value하여 select요소 의 속성에 대한 실제 값을 설정할 수 있습니다 track by.

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

이 추악한 것들을 기억하는 방법

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

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)쌍 으로 분해된다는 것을 기억하십시오 .

값 속성이 값을 얻는 방법 :

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

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

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>

"추적 기준"을 사용하여 모든 값을 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 + JavaScript 애플리케이션을위한 MVC 프레임 워크 역할을합니다. (V) iew 구성 요소는 HTML "템플릿"을 제공하지만 기본 목적은 컨트롤러를 통해 모델의 변경 사항에 사용자 작업을 연결하는 것입니다. 따라서 AngularJS에서 작동하는 적절한 추상화 수준은 select 요소가 모델의 값을 쿼리의 값으로 설정하는 것 입니다.

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

이것이 문제인 올바른 해결책은 본질적으로 아키텍처이며 (M) odel이 (사용자가 양식을 제출하는 대신) 필요할 때 서버 통신을 수행하도록 HTML을 리팩토링 하는 것입니다.

MVC HTML 페이지가 당면한 문제에 대해 불필요한 과도한 엔지니어링이 필요하지 않은 경우 AngularJS (V) iew 구성 요소의 HTML 생성 부분 만 사용하십시오. 이 경우 &lt;li /&gt;'s under &lt;ul /&gt;' 와 같은 요소를 생성하는 데 사용되는 동일한 패턴을 따르고 옵션 요소에 ng-repeat를 배치합니다.

<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는 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.valueng-model

스택 오버플로 질문 AngularJS ng-options not rendering values를 참조하십시오 .

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

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

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

질문에 설명 된대로 select의 사용 :

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

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

표현식 목록에 따르면 옵션이 객체 배열에 주어 졌을 때 trackexpr 이 값을 지정하는 데 사용될 수 있지만 그룹화에만 사용되었습니다.

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

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

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

한동안 그들과 어려움을 겪은 후 내가 사용하는 가장 일반적인 데이터 소스로 샘플을 만들었습니다. 여기에서 찾을 수 있습니다.

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

이제 ng-options를 작동시키기 위해 고려해야 할 몇 가지 사항이 있습니다.

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

  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의 대답 이 가장 좋은 대답입니다.

그러나 실제로는 선택 옵션의 값 속성 설정에 대해 걱정할 필요가 없습니다. 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는 다른 것으로 간주합니다 .

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

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

시도하십시오 

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

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

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>

잘 작동합니다

개체의 경우 :

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

개발자가 ng-options를 사용하는 것은 항상 고통 스럽습니다. 예 : 선택 태그에서 비어 있거나 비어있는 선택된 값 가져 오기. 특히 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>

In your Controller you need to set an initial value to get rid of the first empty item:

 $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)

Here is how I solve this problem in a legacy application:

In HTML:

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

In JavaScript:

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];

My HTML displays the option value properly.

ngOptions directive:

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

  • Case-1) label for value in array:

    <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>

Output Explanation (Assume 1st item selected):

selectedItem = {name: 'a', age: 20} // [by default, selected item is equal to the value item]

selectedItem.age = 20

  • Case-2) select as label for value in array:

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

Output Explanation (Assume 1st item selected): selectedItem = 20 // [select part is item.age]

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

반응형

'Programing' 카테고리의 다른 글

아포스트로피가 리소스 번들에 배치 될 때 제대로 번역되지 않습니다.  (0) 2020.10.05
변수에 로컬 JSON 파일로드  (0) 2020.10.05
자바 : 목록 변환  (0) 2020.10.04
Vim에서 커서를 이동하지 않고 화면을 이동하는 방법은 무엇입니까?  (0) 2020.10.04
생성 알고리즘과 차별 알고리즘의 차이점은 무엇입니까?  (0) 2020.10.04

'Programing'의 다른글

  • 현재글AngularJS의 ng-options에서 값 속성을 어떻게 설정합니까?

관련글

댓글

티스토리툴바