як використовувати ng-опцію для встановлення значення за замовчуванням вибраного елемента

Я бачив документацію директиви щодо вибору кута тут: http://docs.angularjs.org/api/ng . Директиви: виберіть . Я не можу зрозуміти, як встановити значення за замовчуванням. Це заплутано:

виділіть як мітку для значення в масиві

Ось об'єкт:

{
    "type": "select", 
    "name": "Service",
    "value": "Service 3", 
    "values": [ "Service 1", "Service 2", "Service 3", "Service 4"] 
}

Html (робочий):


а потім я намагаюся додати атрибут ng-option у елемент select, щоб встановити значення prop.value як параметр за умовчанням (не працює).

ng-options="(prop.value) for v in prop.values"

Що я роблю неправильно?

128

10 Відповіді

Тому припустимо, що об'єкт знаходиться у вашому масштабі:

<div ng-controller="MyCtrl">
  
</div>

 

function MyCtrl($scope) {
  $scope.prop = {
    "type": "select", 
    "name": "Service",
    "value": "Service 3", 
    "values": [ "Service 1", "Service 2", "Service 3", "Service 4"] 
  };
}

Working Plunkr: http://plnkr.co/edit/wTRXZYEPrZJRizEltQ2g

118
додано
@ HVarma values ​​[0] ?
додано Автор James Kleeh, джерело
якщо ви хочете побудувати вибір у виді, не виписавши параметри, і мати один вибраний
додано Автор asherrard, джерело
добре. Я зрозумів! ng-option замінює значення спасибі ще раз
додано Автор François Romain, джерело
Там повинен бути простий спосіб зробити це, я вважаю це дуже складним для простого вибору значення за замовчуванням в кутових js
додано Автор Edmund Rojas, джерело
ng-option є дещо складною і заплутаною в її синтаксисі. Я думаю, що гнучкість прив'язування об'єктів зробила її трохи складною. Спосіб, яким я намагаюся запам'ятати це, полягає в тому, що кожен раз, коли я використовую об'єкт, я явно вказую, які властивості використовувати для атрибутів value/text елемента керування вибору. Для отримання додаткової інформації див. Це: ozkary.com/2015/08/ angularjs-ngoption-directive-simplified.h & zwnj; tml
додано Автор ozkary, джерело
@james Kleeh .. тут ви твердо кодування першого варіанту, оскільки ви знаєте їх.Але якщо ми не знаємо параметри і як ми можемо відображати перший за замовчуванням?
додано Автор H Varma, джерело
Хто-небудь знає, як додати значення за замовчуванням як "Вибрати параметр" як значення за замовчуванням
додано Автор Gaurav, джерело

кутова документація для вибору * не відповідає на це питання явно, але вона є. Якщо ви подивитеся на script.js , ви побачите таке:

function MyCntrl($scope) {
  $scope.colors = [
    {name:'black', shade:'dark'},
    {name:'white', shade:'light'},
    {name:'red', shade:'dark'},
    {name:'blue', shade:'dark'},
    {name:'yellow', shade:'light'}
  ];
  $scope.color = $scope.colors[2];//Default the color to red
}

Це html:


This seems to be a more obvious way of defaulting a selected value on an

65
додано
Це попрацювало для мене, я сумніваюсь, що це знову вийде, але я в даний час використовую AngularJS v1.2.27, якщо хто-небудь це знайде і цікаво про сумісність.
додано Автор Bob Cadmire, джерело

Ця відповідь є більш корисною, коли ви передаєте дані з БД, внесіть зміни та зберігаєте ці зміни.

 

Перевірте приклад тут:

http://plnkr.co/edit/HrT5vUMJOtP9esGngbIV

36
додано
Це той, який працює для мене.
додано Автор passatgt, джерело
Нарешті, робоча відповідь тут, виправдана! Також за допомогою цього рішення ви можете мати неправильний параметр worknig правильно.
додано Автор Azarus, джерело
Так що радий, що цей пост існує, я шукав якийсь час для рішення, і це дозволило моє питання.
додано Автор slee423, джерело

Якщо ваш комплекс об'єктів складний, наприклад:

$scope.friends = [{ name: John , uuid: 1234}, {name: Joe, uuid, 5678}];

І ваша поточна модель була налаштована на щось на кшталт:

$scope.user.friend = {name:John, uuid: 1234};

Це допомогло використати функцію track by на uuid (або будь-якому унікальному полі), якщо ng-model = "user.friend" також має uuid:


20
додано
Ця відповідь зробив мій день! Також подивіться на трек у цій документації: docs.angularjs.org/api/ng/директива/ngOptions
додано Автор Arashsoft, джерело
Це найкраща відповідь!
додано Автор Gerfried, джерело

20
додано
Погана практика тут ... Подивіться на другу жовту ноту: docs.angularjs.org/api/ng/directive/select .
додано Автор M'sieur Toph', джерело
це не буде працювати, ex. коли ви намагаєтесь відредагувати запис, як запис буде пов'язаний з полем?
додано Автор windmaomao, джерело

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

Зазвичай ви зберігаєте лише ідентифікатор потрібної опції у вашій базі даних, так що ... покажемо це

service.js

myApp.factory('Models', function($http) {
var models = {};
models.allModels = function(options) {
    return $http.post(url_service, {options: options});
};

return models;
});

controller.js

myApp.controller('exampleController', function($scope, Models) {
$scope.mainObj={id_main: 1, id_model: 101};
$scope.selected_model = $scope.mainObj.id_model;
Models.allModels({}).success(function(data) {
    $scope.models = data; 
});
});

Finally the partial html model.html

Model: 

в основному я хотів зазначити, що " model.id_model як model.name для моделі в моделях " " model.id_model " використовує ідентифікатор моделі для значення, так що що ви можете відповідати " mainObj.id_model ", який також є " selected_model ", це просто значення, а також " як model.name "- це етикетка для ретранслятора, нарешті" модель у моделях "- це лише звичайний цикл, про який ми всі знаємо.

Сподіваюсь, що це допомагає комусь, і якщо це так, прошу голосувати: D

10
додано
ви можете просто зв'язати вибір mainObj.id_model безпосередньо ( ng-model = "mainObj.id_model" ), а не використовувати змінну "placeholder/plain value" selected_model
додано Автор drzaus, джерело
Чи можна пов'язати об'єкт, а не просто int? Я не можу отримати мої nGoptions для встановлення обраного вами елемента, оскільки він не знає, як прив'язувати мій {id: 24} до моїх [{id: 23}, {id: 24}, {id: 25}].
додано Автор Victorio Berra, джерело
так, дійсно, я просто хотів показати, що це може бути зроблено з цінністю безпосередньо в межах $ scope, але дякую, що вказали на це.
додано Автор Coronellx, джерело
ви завжди можете використовувати $ index для отримання позиції, проте, так, можна пов'язати його з об'єктом
додано Автор Coronellx, джерело

Простий спосіб зробити це - скористатися data-ng-init таким:


The main difference here is that you would need to include data-ng-model

8
додано
Те, як я розмістив, з ng-варіантами набагато простіше і конкретніше. Обидва шляхи працюють.
додано Автор WMios, джерело
Як зазначено в документах: єдиним правильним використанням ngInit є використання додаткових властивостей ngRepeat, як це видно з демо-версії нижче. Крім того, ви повинні використовувати контролери, а не ngInit, щоб ініціалізувати значення в області.
додано Автор wbeange, джерело
8
додано
чудово працював Дякую!
додано Автор Akash, джерело
Це дійсно працює, якщо ви додаєте щось на зразок
додано Автор fWd82, джерело

The ng-model attribute sets the selected option and also allows you to pipe a filter like orderBy:orderModel.value

index.html


controllers.js

$scope.orderOptions = [
    {"name":"Newest","value":"age"},
    {"name":"Alphabetical","value":"name"}
];

$scope.orderModel = $scope.orderOptions[0];
3
додано
Спробуємо це, і я бачу angular.js: 117 TypeError: a.forEach не є функцією . Будь-які думки?
додано Автор carmenism, джерело

Якщо хтось запускається в значення за умовчанням, яке іноді не розміщується на сторінці в Chrome, IE 10/11, Firefox, спробуйте додати цей атрибут до поля перевірки вводу/вибору для заповненої змінної в HTML, наприклад:

<input data-ng-model="vm.x" data-ng-if="vm.x !== '' && vm.x !== undefined && vm.x !== null" />
1
додано