Ось що, здається, турбує багатьох людей (включаючи мене).

Використовуючи 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-опціях. Кожен створений параметр встановлювався з 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 }
        ];

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

• Як представлений користувачу рядок запитів викликає занепокоєння (V) iew і 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 здійснював зв’язок із сервером, коли це потрібно (замість того, щоб користувач подав форму).

Якщо HTML-сторінка MVC є непотрібною надмірною інженерією для існуючої проблеми: тоді використовуйте лише частину HTML-генерації компонента iew AngularJS (V) iew. У цьому випадку дотримуйтесь тієї ж схеми, яка використовується для генерації елементів, таких як <li />'s під <ul />', та розмістіть ng-повтор на елементі опції:

<select name=“value”>
    <option ng-repeat=“value in Model.Values” value=“{{value.value}}”>
        {{value.text}}
    </option>
</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, який показує мою роботу.

Замість використання нової функції "відстежувати за" ви можете просто зробити це з масивом, якщо ви хочете, щоб значення були такими ж, як текст:

<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.valueзначення у вибраномуng-model

Див. Запитання про переповнення стека AngularJS ng-options, що не надають значення .

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

Ви можете використовувати ng-параметри для досягнення прив'язки тегів до значень та членів відображення

Під час використання цього джерела даних

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

Однак я просто хотів підкреслити, що "select" не є ключовим словом у цьому контексті, а лише заповненням виразу. Будь ласка, зверніться до наступного списку, для визначення виразу "select", а також інших виразів, які можуть бути використані в директиві ng-options.

Використання вибору, як зображено у запитанні:

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

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

Виходячи зі списку виразів, здається, що trackexpr може бути використаний для визначення значення, коли параметри задаються в масиві об'єктів, але він використовувався лише з групуванням.

З документації AngularJS для ng-опцій:

• масив / об'єкт : вираз, який оцінює масив / об'єкт для повторення.
• значення : локальна змінна, яка буде посилатися на кожен елемент масиву або кожне значення властивості об'єкта під час ітерації.
• ключ : локальна змінна, яка буде посилатися на ім'я властивості в об'єкті під час ітерації.
• label : Результатом цього виразу буде мітка для елемента. Вираз, швидше за все, буде стосуватися змінної значення (наприклад, value.propertyName).
• select : Результат цього виразу буде прив’язаний до моделі батьківського елемента. Якщо це не вказано, значення вибору за замовчуванням буде значенням.
• група : Результат цього виразу буде використаний для групування параметрів за допомогою елемента DOM.
• trackexpr : використовується під час роботи з масивом об'єктів. Результат цього виразу буде використаний для ідентифікації об'єктів у масиві. Trackexpr, швидше за все, буде посилатися на змінну значення (наприклад, value.propertyName).

Вибір елемента в ng-параметрах може бути трохи складним залежно від способу встановлення джерела даних.

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

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

Тепер, щоб ng-параметри спрацювали, ось що слід врахувати:

1. Зазвичай ви отримуєте параметри з одного джерела та вибране значення з іншого. Наприклад:
   • state :: дані для ng-опцій
   • user.state :: Можливість встановити вибраний
2. На основі 1 найпростіша / логічна річ - це заповнити вибір одним джерелом, а потім встановити вибране значення корисного коду. Рідко було б краще отримати змішаний набір даних.
3. AngularJS дозволяє вибрати елементи управління, щоб утримувати більше key | label. Багато прикладів в Інтернеті ставлять об'єкти як "ключові", і якщо вам потрібна інформація від об'єкта, встановіть його таким чином, в іншому випадку використовуйте конкретну властивість, яка вам потрібна як ключ. (Ідентифікатор, КОД і т. Д. Як у прикладі 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.

Для мене відповідь Бруно Гомеса - найкраща відповідь.

Але насправді вам не потрібно турбуватися про встановлення властивості значення вибраних параметрів. 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 або будь-який інший інша бібліотека, щоб отримати доступ до значення цього вибору параметрів комбінованого вікна та маніпулювати ним відповідно.

Через рік після запитання мені довелося знайти відповідь на це питання, оскільки не з них дали справжню відповідь, принаймні мені.

Ви запитали, як вибрати варіант, але ніхто не сказав, що ці дві речі НЕ однакові:

Якщо у нас є такі варіанти:

$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-варіанти. Наприклад: Отримання порожнього / порожнього вибраного значення у виділеному тезі. Особливо при роботі з об'єктами 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>

Наведеним вище зразком коду ви можете вийти з цього перебільшення.

Ще одна довідка :

Підручник 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>

<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 = {ім'я: «а», вік: 20} // [за замовчуванням, обраний елемент дорівнює значенню елемента ]

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>

Пояснення виводу (припустимо, вибрано 1-й елемент): selectedItem = 20 // [виберіть частину item.age ]