Вот то, что, кажется, беспокоит многих людей (включая меня).

При использовании ng-optionsдирективы в AngularJS, чтобы заполнить опции для<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:

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

Я узнал об этом из сообщения в блоге. Как установить начальное выбранное значение элемента select с помощью 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 служит средой MVC для динамического приложения HTML + JavaScript. Хотя его (V) iew-компонент действительно предлагает HTML-шаблонизацию, его основная цель состоит в том, чтобы связать действия пользователя через контроллер с изменениями в модели. Следовательно, соответствующий уровень абстракции, с которой можно работать в AngularJS, заключается в том, что элемент select устанавливает значение в модели в значение из запроса .

• То, как строка запроса представляется пользователю, является задачей (V) iew и ng-optionsпредоставляет forключевое слово, чтобы определить, каким должно быть содержимое элемента option, т.е. p.text for p in resultOptions .
• То, как выбранная строка представляется серверу, является проблемой (M) odel. Поэтому ng-optionsпредоставляет asключевое слово, чтобы указать, какое значение предоставляется модели, как в k as v for (k,v) in objects.

Правильное решение этой проблемы является архитектурным по своей природе и включает в себя рефакторинг вашего HTML, чтобы (M) odel осуществлял связь с сервером при необходимости (вместо пользователя, отправляющего форму).

Если HTML-страница MVC не требует чрезмерного проектирования для рассматриваемой проблемы: используйте только часть генерации HTML компонента AngularJS (V) iew. В этом случае следуйте тому же шаблону, который используется для генерации элементов, таких как <li />'under <ul />', и поместите ng-repeat в элемент option:

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

В качестве kludge всегда можно переместить атрибут name элемента select в скрытый элемент ввода:

<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 решение «s намного лучше. Код:

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, который показывает мою работу.

Вместо использования новой функции track by вы можете просто сделать это с массивом, если хотите, чтобы значения были такими же, как у текста:

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

Обратите внимание на разницу между стандартным синтаксисом, который сделает значения ключами Object / Array и, следовательно, 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.valueзначение в выборng-model

См. Вопрос переполнения стека AngularJS ng-options, не отображающий значения .

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

Вы можете использовать ng-options для привязки тега select к значению и отображения членов

При использовании этого источника данных

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 элементов option.

Тем не менее, я просто хотел подчеркнуть, что «select» не является ключевым словом в этом контексте, но это просто заполнитель для выражения. Пожалуйста, обратитесь к следующему списку для определения выражения "select", а также других выражений, которые могут использоваться в директиве ng-options.

Использование select, как это изображено в вопросе:

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

по сути неправильно.

Исходя из списка выражений, кажется, что trackexpr может использоваться для указания значения, когда параметры задаются в массиве объектов, но оно используется только для группировки.

Из документации AngularJS для ng-options:

• массив / объект : выражение, которое оценивает массив / объект для повторения.
• значение : локальная переменная, которая будет ссылаться на каждый элемент в массиве или на каждое значение свойства объекта во время итерации.
• ключ : локальная переменная, которая будет ссылаться на имя свойства в объекте во время итерации.
• label : Результатом этого выражения будет метка для элемента. Выражение, скорее всего, будет ссылаться на переменную значения (например, value.propertyName).
• select : результат этого выражения будет привязан к модели родительского элемента. Если не указано, выберите выражение по умолчанию значение.
• group : результат этого выражения будет использоваться для группировки параметров с использованием элемента DOM.
• trackexpr : Используется при работе с массивом объектов. Результат этого выражения будет использоваться для идентификации объектов в массиве. Trackexpr, скорее всего, будет ссылаться на переменную значения (например, value.propertyName).

Выбор элемента в ng-options может быть немного сложным в зависимости от того, как вы настроили источник данных.

Поработав с ними некоторое время, я сделал выборку с наиболее распространенными источниками данных, которые я использую. Вы можете найти это здесь:

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

Теперь, чтобы заставить работать ng-опции, вот несколько вещей, которые нужно учитывать:

1. Обычно вы получаете параметры из одного источника и выбранное значение из другого. Например:
   • состояния :: данные для ng-параметров
   • user.state :: Параметр, чтобы установить как выбранный
2. Исходя из 1, проще всего / логично сделать заполнение выбора одним источником, а затем установить выбранный код через значение. Редко было бы лучше получить смешанный набор данных.
3. AngularJS позволяет выбрать элементы управления, чтобы держать больше, чем key | label. Многие онлайн-примеры помещают объекты в качестве «ключа», и если вам нужна информация от объекта, установите ее таким образом, в противном случае используйте конкретное свойство, которое вам нужно, в качестве ключа. (ID, код и т. Д. Как в примере с 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;
       }
     }

Вы можете заменить saveValue для того же свойства в другом объекте $scope.myObject.myProperty.

Для меня ответ Бруно Гомеса - лучший ответ.

Но на самом деле вам не нужно беспокоиться о настройке свойства value опций select. 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 или какой-либо другой другая библиотека, чтобы получить доступ к значению этих параметров поля со списком и манипулировать им соответственно.

Через год после вопроса мне нужно было найти ответ на этот вопрос, поскольку ни один из них не дал фактического ответа, по крайней мере, мне.

Вы спросили , как выбрать вариант, но никто не сказал , что эти две вещи НЕ одинаковы:

Если у нас есть варианты, подобные этой:

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

И мы пытаемся установить опцию по умолчанию следующим образом:

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

Это НЕ будет работать, но если вы попытаетесь выбрать опцию, как это:

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

Это будет РАБОТАТЬ .

Несмотря на то, что эти два объекта имеют одинаковые свойства, AngularJS рассматривает их как РАЗНЫЕ, потому что AngularJS сравнивает по ссылке .

Взгляните на скрипку 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-options. Например: получение пустого / пустого выбранного значения в теге выбора. Особенно когда имеешь дело с объектами JSON в ng-options, это становится более утомительным. Здесь я сделал несколько упражнений на это.

Цель: перебрать массив объектов JSON с помощью ng-option и установить выбранный первый элемент.

Данные:

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"Следует установить на объект с ключом в качестве идентификатора типа 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>

В вашем контроллере вам нужно установить начальное значение, чтобы избавиться от первого пустого элемента:

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

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

Мой 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>

Вывод Объяснение (Предположим, выбран 1-й элемент):

selectedItem = {name: 'a', age: 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>

Вывод Объяснение (Предположим, выбран 1-й элемент): selectedItem = 20 // [выберите элемент item.age ]