Ответ 1

См. 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 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 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 выражения 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).

Ответ 2

Как атрибуты значения получают свое значение:

• При использовании массива в качестве источника данных он будет индексом элемента массива на каждой итерации;
• При использовании объекта в качестве источника данных он будет именем свойства на каждой итерации.

Итак, в вашем случае это должно быть:

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

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

Ответ 3

У меня тоже была эта проблема. Мне не удалось установить значение в ng-опциях. Каждый сгенерированный параметр был установлен с помощью 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.

Смотрите видео. Это хороший класс:)

Ответ 4

Если вы хотите изменить значение своих элементов 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 }}" />

Ожидаемое значение затем будет отправлено через форму под правильным именем.

Ответ 5

Чтобы отправить пользовательское значение my_hero на сервер, используя обычную форму submit:

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.

Ответ 6

Похоже, что ng-options сложно (возможно, разочаровывает), но на самом деле у нас есть проблема архитектуры.

AngularJS служит основой MVC для динамического приложения HTML + JavaScript. В то время как его компонент (V) iew предлагает HTML-шаблоны, его основная цель - связать действия пользователя с помощью контроллера с изменениями в модели. Поэтому соответствующий уровень абстракции, из которого можно работать в AngularJS, заключается в том, что элемент select устанавливает значение в модели в значение из запроса.

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

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

Если HTML-страница MVC не требует излишней инженерии для данной проблемы:, то используйте только часть генерации HTML компонента AngularJSs (V). В этом случае следуйте той же схеме, которая используется для генерации таких элементов, как <li /> в разделе <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}}" />

Ответ 7

Вы можете сделать это:

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

Ответ 8

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

Ответ 9

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

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

Ответ 10

Это лучше всего подходит для всех сценариев по мне:

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

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

Ответ 11

Вот как я это решил. Я отслеживал выбор по значению и задал свойство выбранного элемента модели в своем 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'}.

Когда я выбрал другую страну из раскрывающегося списка "Выбор" и разместил мою страницу с "Сохранить", я получил правильную страну.

Ответ 12

Директива ng-options не устанавливает атрибут value для элементов <options> для массивов:

Использование limit.value as limit.text for limit in limits означает:

установите метку <option> как limit.text
сохраните значение limit.value в списке ng-model

См. Stack Вопрос переполнения Параметры AngularJS ng, не отображающие значения.

Ответ 13

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

Ответ 14

Правильный ответ на этот вопрос был предоставлен пользователем frm.adiputra, поскольку в настоящее время это единственный способ явно контролировать атрибут value опции элементы.

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

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

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

по существу является неправильным.

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

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

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

Ответ 15

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

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

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

Теперь, чтобы выполнить ng-options, рассмотрим следующие вещи:

• Обычно вы получаете опции из одного источника и выбранного значения из другого. Например:
  • состояния:: данные для ng-options
  • user.state:: Параметр для установки в качестве выбранного
• Основываясь на 1, самая простая/логичная задача - заполнить выбор одним источником, а затем установить выбранный код кода. Редко было бы лучше получить смешанный набор данных.
• Функция AngularJS позволяет выбирать элементы управления более чем key | label. Многие онлайн-примеры ставят объекты как "ключ", и если вам нужна информация из объекта, заданного таким образом, в противном случае используйте конкретное свойство, которое вам нужно в качестве ключа. (ID, CODE и т.д. Как и в примере plckr)

• Способ установки значения выпадающего меню/выбора зависит от # 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.

Ответ 16

Через год после вопроса мне пришлось найти ответ на этот вопрос, так как не из них дал реальный ответ, по крайней мере для меня.

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

Если у нас есть такие опции:

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

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

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

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

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

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

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

Взгляните на скрипку http://jsfiddle.net/qWzTb/.

Ответ 17

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

Но на самом деле вам не нужно беспокоиться о настройке свойства 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
    }
});

Как вы можете видеть на выходе скрипта, независимо от того, что вы выберете для выбора параметров окна, это ваше пользовательское значение или автоматическое генерируемое значение 0, 1, 2 от AngularJS, это не имеет значения в вашем выводе, если вы не используете jQuery или любую другую библиотеку, чтобы получить доступ к значению этих параметров выбора со списком и соответствующим образом манипулировать им.

Ответ 18

Для объекта:

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

Ответ 19

Для разработчиков всегда больно использовать ng-options. Например: получение пустого/чистого выбранного значения в теге select. Особенно при работе с объектами JSON в ng-вариантах он становится более утомительным. Здесь я сделал несколько упражнений.

Цель: Итерировать массив объектов JSON через опцию ng и установить выбранный первый элемент.

Данные:

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>

В приведенном выше примере кода вы можете выйти из этого преувеличения.

Еще ссылка:

Ответ 20

Учебник ANGULAR.JS: NG-SELECT AND 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>

Ответ 21

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

Попробуйте

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

который назначит метки с текстом и значением со значением (из массива)

Ответ 22

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

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

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

вы можете использовать ниже, чтобы привязать ваш тег select к значению и имени

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

он отлично работает

Ответ 23

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

Ответ 24

Запустите фрагмент кода и просмотрите варианты. Вот замечание для быстрого понимания

• Пример 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 (Выбор значения): - 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>

Ответ 25

Как и многие предыдущие, если у меня есть данные примерно так:

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)

Ответ 26

Вот как я решаю эту проблему в устаревшем приложении:

В 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 правильно отображает значение параметра.

Ответ 27

директива 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}//[по умолчанию выбранный элемент равен значению item]

selectedItem.age = 20

• Case-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//[select part is item.age]