как использовать ng-option для установки значения по умолчанию для элемента select


148

Я видел документацию по угловой директиве select здесь: http://docs.angularjs.org/api/ng.directive:select . Я не могу понять, как установить значение по умолчанию. Это смущает:

выбрать в качестве метки для значения в массиве

Вот объект:

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

HTML (рабочий):

<select><option ng-repeat="value in prop.values">{{value}}</option></select>

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

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

Что я делаю не так?

Ответы:


131

Итак, предполагая, что объект находится в вашей области видимости:

<div ng-controller="MyCtrl">
  <select ng-model="prop.value" ng-options="v for v in prop.values">
  </select>
</div>

 

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

Рабочий Планкр: http://plnkr.co/edit/wTRXZYEPrZJRizEltQ2g


2
Ладно, я понял! ng-optionвытесняет <option ng-repeat="value in prop.values">{{value}}</option>еще раз спасибо
Франсуа Romain

2
Должен быть более простой способ сделать это, я нахожу это очень сложным для простого выбора значения по умолчанию в угловых js
Эдмунд Рохас

1
Директива ng-option несколько сложна и запутана в своем синтаксисе. Я думаю, что гибкость привязки объектов сделала это немного сложнее. Я пытаюсь запомнить это, когда всякий раз, когда я использую объект, я явно указываю, какие свойства использовать для атрибутов value / text элемента управления select. Для получения дополнительной информации смотрите это: ozkary.com/2015/08/angularjs-ngoption-directive-simplified.html
ozkary

2
если вы хотите создать выборку в представлении, не записывая опции и <select ng-model="limit" value="10" ng-options="v for v in [5,10,15,20,30,50]"></select>
выбрав

1
@james Kleeh .. здесь вы жестко программируете первый вариант, так как вы его знаете. Но если мы не знаем параметры и как мы можем отобразить первый вариант по умолчанию?
H Варма

69

В угловой документации для select * этот вопрос не дается явно, но он есть. Если вы посмотрите на 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:

<select ng-model="color" ng-options="c.name for c in colors"></select>

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

* Это из Angular 1.2.7


Это сработало для меня, я сомневаюсь, что это произойдет снова, но в настоящее время я использую AngularJS v1.2.27 на тот случай, если кто-нибудь найдет это и задается вопросом о совместимости.
Роберт Кадмир

41

Этот ответ более полезен, когда вы переносите данные из БД, вносите изменения, а затем сохраняете изменения.

 <select  ng-options="opt.id as opt.name for opt in users" ng-model="selectedUser"></select>

Проверьте пример здесь:

http://plnkr.co/edit/HrT5vUMJOtP9esGngbIV


Наконец рабочий ответ здесь, проголосовал! Кроме того, с этим решением вы можете правильно работать с неопределенной опцией. <option value = ""> Пожалуйста, выберите </ option>
DDD

Я так рад, что этот пост существует, я некоторое время искал решение, и этот вопрос решил мою проблему.
slee423

22
<select name='partyid' id="partyid" class='span3'>
<option value=''>Select Party</option>
<option ng-repeat="item in partyName" value="{{item._id}}" ng-selected="obj.partyname == item.partyname">{{item.partyname}}
</option>
</select>

5
Плохая практика здесь ... Посмотрите на вторую желтую заметку: docs.angularjs.org/api/ng/directive/select .
Мсье Toph '16

это не сработает, напр. когда вы пытаетесь редактировать запись, как запись будет привязана к полю?
windmaomao

21

Если ваш массив объектов сложен, как:

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

<select ng-model="user.friend" 
ng-options="friend as friend.name for friend in friends track by friend.uuid"> 
</select>

Этот ответ сделал мой день! Также посмотрите на трек в этой документации: docs.angularjs.org/api/ng/directive/ngOptions
Arashsoft

Это лучший ответ!
Gerfried

10

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

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

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

Наконец, частичный html model.html

Model: <select ng-model="selected_model" 
ng-options="model.id_model as model.name for model in models" ></select>

в основном я хотел указать, что кусок " model.id_model в качестве model.name для модели в моделях " " model.id_model " использует идентификатор модели для значения, чтобы вы могли сопоставить с " mainObj.id_model ", который также « selected_model », это просто обычное значение, также « as model.name » - метка для повторителя, наконец, « модель в моделях» » - это обычный цикл, о котором мы все знаем.

Надеюсь, это кому-нибудь поможет, и если это так, пожалуйста, проголосуйте: D


1
Вы можете просто привязать select к mainObj.id_modeldirect ( ng-model="mainObj.id_model"), а не использовать переменную placeholder / plain valueselected_model
drzaus

да, действительно, я просто хотел показать, что это может быть сделано со значением непосредственно в $ scope, но спасибо за указание на это.
Уистон Коронелл

Возможно ли привязать объект, а не только int? Я не могу заставить свои nGoptions установить выбранный элемент, потому что он не знает, как привязать мой {id: 24} к моему [{id: 23}, {id: 24}, {id: 25}].
Викторио Берра

вы всегда можете использовать $ index, чтобы получить позицию, однако, да, можно привязать к объекту
Wiston Coronell

10
<select id="itemDescFormId" name="itemDescFormId" size="1" ng-model="prop" ng-change="update()">
    <option value="">English(EN)</option>
    <option value="23">Corsican(CO)</option>
    <option value="43">French(FR)</option>
    <option value="16">German(GR)</option>

Просто добавьте опцию с пустым значением. Это сработает.

ДЕМО Плнкр


Это действительно работает, если вы добавите что-то вроде<option value="" disabled>Please Select</option>
fWd82

9

Более простой способ сделать это - использовать data-ng-init следующим образом:

<select data-ng-init="somethingHere = options[0]" data-ng-model="somethingHere" data-ng-options="option.name for option in options"></select>

Основное отличие здесь в том, что вам нужно будет включить data-ng-model


3
Как указано в документе: Единственное подходящее использование ngInit - для наложения псевдонимов специальных свойств ngRepeat, как показано в демонстрации ниже. Помимо этого случая, вы должны использовать контроллеры вместо ngInit для инициализации значений в области.
user12121234

1
То, как я писал, с помощью ng-options намного проще и конкретнее. Оба способа работают.
Wyetro

3

Нг-модель атрибут устанавливает выбранный вариант , а также позволяет трубе фильтр как OrderBy: orderModel.value

index.html

<select ng-model="orderModel" ng-options="option.name for option in orderOptions"></select>

controllers.js

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

$scope.orderModel = $scope.orderOptions[0];

1
Пробую это и вижу angular.js:117 TypeError: a.forEach is not a function. Есть предположения?
карменизм

1

Если кто-либо использует значение по умолчанию, которое иногда не заполняется на странице в Chrome, IE 10/11, Firefox, попробуйте добавить этот атрибут в поле ввода / выбора, проверяя заполненную переменную в HTML, например, так:

<input data-ng-model="vm.x" data-ng-if="vm.x !== '' && vm.x !== undefined && vm.x !== null" />

0

Это действительно просто, если вы не заботитесь об индексации своих опций с каким-либо числовым идентификатором.

  1. Объявите свой $ scope var - people array

    $scope.people= ["", "YOU", "ME"];
  2. В DOM вышеуказанной области действия создайте объект

    <select ng-model="hired" ng-options = "who for who in people"></select>
  3. В вашем контроллере вы устанавливаете свою ng-модель "нанятая".

    $scope.hired = "ME";

Удачи!!! Это действительно легко!


0

Просто чтобы сложить, я сделал что-то вроде этого.

 <select class="form-control" data-ng-model="itemSelect" ng-change="selectedTemplate(itemSelect)" autofocus>
        <option value="undefined" [selected]="itemSelect.Name == undefined" disabled="disabled">Select template...</option>
        <option ng-repeat="itemSelect in templateLists" value="{{itemSelect.ID}}">{{itemSelect.Name}}</option></select>
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.