Я искал Google и не могу найти что-либо на этом.
У меня есть этот код.
<select ng-model="somethingHere"
ng-options="option.value as option.name for option in options"
></select>
С некоторыми данными, подобными этому
options = [{
name: 'Something Cool',
value: 'something-cool-value'
}, {
name: 'Something Else',
value: 'something-else-value'
}];
И результат выглядит примерно так.
<select ng-model="somethingHere"
ng-options="option.value as option.name for option in options"
class="ng-pristine ng-valid">
<option value="?" selected="selected"></option>
<option value="0">Something Cool</option>
<option value="1">Something Else</option>
</select>
Как можно установить первый параметр в данных как значение по умолчанию, чтобы вы получили такой результат.
<select ng-model="somethingHere" ....>
<option value="0" selected="selected">Something Cool</option>
<option value="1">Something Else</option>
</select>
Вы можете просто использовать ng-init, как этот
<select ng-init="somethingHere = options[0]"
ng-model="somethingHere"
ng-options="option.name for option in options">
</select>
Если вы хотите, чтобы ваше значение $scope.somethingHere
не было перезаписано при инициализации вашего представления, вы захотите объединить (somethingHere = somethingHere || options[0].value
) значение в своем ng-init, например:
<select ng-model="somethingHere"
ng-init="somethingHere = somethingHere || options[0].value"
ng-options="option.value as option.name for option in options">
</select>
Попробуйте следующее:
HTML
<select
ng-model="selectedOption"
ng-options="option.name for option in options">
</select>
Javascript
function Ctrl($scope) {
$scope.options = [
{
name: 'Something Cool',
value: 'something-cool-value'
},
{
name: 'Something Else',
value: 'something-else-value'
}
];
$scope.selectedOption = $scope.options[0];
}
Plunker здесь.
Если вы действительно хотите установить значение, которое будет привязано к модели, измените атрибут ng-options
на
ng-options="option.value as option.name for option in options"
а Javascript -
...
$scope.selectedOption = $scope.options[0].value;
Другой Plunker здесь, учитывая вышеизложенное.
Я думаю, после включения "track by" вы можете использовать его в ng-вариантах, чтобы получить то, что вам нужно, например следующее
<select ng-model="somethingHere" ng-options="option.name for option in options track by option.value" ></select>
Этот способ сделать это лучше, потому что, когда вы хотите заменить список строк списком объектов, вы просто измените это на
<select ng-model="somethingHere" ng-options="object.name for option in options track by object.id" ></select>
где somethingHere - это объект с именем свойства и идентификатором, конечно. Обратите внимание: "как" не используется таким образом для выражения параметров ng, потому что он установит только значение, и вы не сможете изменить его, когда используете дорожку
Только один ответ Шриватса Хариш Венкатарамана упомянул track by
, который действительно является решением для этого!
Вот пример вместе с Plunker (ссылка ниже) о том, как использовать track by
в выберите ng-options
:
<select ng-model="selectedCity"
ng-options="city as city.name for city in cities track by city.id">
<option value="">-- Select City --</option>
</select>
Если selectedCity
определено в области angular и имеет свойство id
с тем же значением, что и любое id
любого city
в списке cities
, оно будет автоматически выбрано на нагрузки.
Вот Plunker для этого: http://plnkr.co/edit/1EVs7R20pCffewrG0EmI?p=preview
Для получения дополнительной информации см. документацию источника: https://code.angularjs.org/1.3.15/docs/api/ng/directive/select
В принятом ответе используется ng-init
, но document говорит, чтобы избежать возможного ng-init.
Единственное соответствующее использование ngInit - для специальных свойств сглаживания ngRepeat, как показано в демонстрации ниже. Помимо этого случая, вы должны используйте контроллеры вместо ngInit для инициализации значений в области.
Вы также можете использовать ng-repeat
вместо ng-options
для своих опций. С помощью ng-repeat
вы можете использовать ng-selected
с помощью специальных свойств ng-repeat
. т.е. $index, $odd, $даже для того, чтобы сделать эту работу без какой-либо кодировки.
$first
является одним из специальных свойств ng-repeat.
<select ng-model="foo">
<option ng-selected="$first" ng-repeat="(id,value) in myOptions" value="{{id}}">
{{value}}
</option>
</select>
---------------------- РЕДАКТИРОВАТЬ ----------------
Хотя это работает, я бы предпочел @mik-t ответить, когда вы знаете, какое значение выбрать, https://stackoverflow.com/questions/18194255/how-to-have-a-default-option-in-angular-js-select-box, в котором используются track-by
и ng-options
без использования ng-init
или ng-repeat
.
Этот ответ должен использоваться только тогда, когда вы должны выбрать первый элемент, не зная, какое значение выбрать. например, я использую это для автоматического завершения, для которого требуется всегда выбирать пункт ПЕРВЫЙ.
ng-options
быстрее и более оптимизирован, чем ng-repeat
.
Моим решением было использование html для жесткого кодирования моей опции по умолчанию. Например:
В HAML:
%select{'ng-model' => 'province', 'ng-options' => "province as province for province in summary.provinces", 'chosen' => "chosen-select", 'data-placeholder' => "BC & ON"}
%option{:value => "", :selected => "selected"}
BC & ON
В HTML:
<select ng-model="province" ng-options="province as province for province in summary.provinces" chosen="chosen-select" data-placeholder="BC & ON">
<option value="" selected="selected">BC & ON</option>
</select>
Я хочу, чтобы моя опция по умолчанию возвращала все значения из моего api, поэтому у меня пустое значение. Также извините мою хамлу. Я знаю, что это не прямой ответ на вопрос OP, но люди находят это в Google. Надеюсь, это поможет кому-то еще.
Используйте код ниже, чтобы заполнить выбранную опцию из вашей модели.
<select id="roomForListing" ng-model="selectedRoom.roomName" >
<option ng-repeat="room in roomList" title="{{room.roomName}}" ng-selected="{{room.roomName == selectedRoom.roomName}}" value="{{room.roomName}}">{{room.roomName}}</option>
</select>
В моем случае мне нужно было вставить начальное значение, чтобы указать пользователю, чтобы выбрать параметр, поэтому мне нравится код ниже:
<select ...
<option value="" ng-selected="selected">Select one option</option>
</select>
Когда я попробовал опцию со значением!= пустой строки (null), опция была заменена на angular, но при установке такой опции (с нулевым значением) выбор должен появиться с этой опцией.
Извините, мой плохой английский, и я надеюсь, что я помогу в чем-то с этим.
В зависимости от того, сколько у вас параметров, вы можете поместить свои значения в массив и автоматически заполнить свои параметры, например,
<select ng-model="somethingHere.values" ng-options="values for values in [5,4,3,2,1]">
<option value="">Pick a Number</option>
</select>
select
с ngOptions
и установив значение по умолчанию:Подробнее о ngOptions
примерах использования см. документацию ngOptions.
angular.module('defaultValueSelect', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.data = {
availableOptions: [
{id: '1', name: 'Option A'},
{id: '2', name: 'Option B'},
{id: '3', name: 'Option C'}
],
selectedOption: {id: '2', name: 'Option B'} //This sets the default value of the select in the ui
};
}]);
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<body ng-app="defaultValueSelect">
<div ng-controller="ExampleController">
<form name="myForm">
<label for="mySelect">Make a choice:</label>
<select name="mySelect" id="mySelect"
ng-options="option.name for option in data.availableOptions track by option.id"
ng-model="data.selectedOption"></select>
</form>
<hr>
<tt>option = {{data.selectedOption}}</tt><br/>
</div>
Официальная документация о элементе HTML select
с привязкой данных angular.
select
к нестрочному значению с помощью ngModel
синтаксического анализа/форматирования:
(function(angular) {
'use strict';
angular.module('nonStringSelect', [])
.run(function($rootScope) {
$rootScope.model = { id: 2 };
})
.directive('convertToNumber', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, ngModel) {
ngModel.$parsers.push(function(val) {
return parseInt(val, 10);
});
ngModel.$formatters.push(function(val) {
return '' + val;
});
}
};
});
})(window.angular);
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.1/angular.min.js"></script>
<body ng-app="nonStringSelect">
<select ng-model="model.id" convert-to-number>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
{{ model }}
</body>
angular.module('defaultValueSelect', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.availableOptions = [
{ name: 'Apple', value: 'apple' },
{ name: 'Banana', value: 'banana' },
{ name: 'Kiwi', value: 'kiwi' }
];
$scope.data = {selectedOption : $scope.availableOptions[1].value};
}]);
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<body ng-app="defaultValueSelect">
<div ng-controller="ExampleController">
<form name="myForm">
<select ng-model="data.selectedOption" required ng-options="option.value as option.name for option in availableOptions"></select>
</form>
</div>
</body>
Это сработало для меня.
<select ng-model="somethingHere" ng-init="somethingHere='Cool'">
<option value="Cool">Something Cool</option>
<option value="Else">Something Else</option>
</select>
Просто используйте ng-selected="true"
следующим образом:
<select ng-model="myModel">
<option value="a" ng-selected="true">A</option>
<option value="b">B</option>
</select>
В ответ на ответ Ben Lesh, должна быть эта строка
ng-init="somethingHere = somethingHere || options[0]"
вместо
ng-init="somethingHere = somethingHere || options[0].value"
То есть
<select ng-model="somethingHere"
ng-init="somethingHere = somethingHere || options[0]"
ng-options="option.name for option in options track by option.value">
</select>
В моем случае, поскольку значение по умолчанию варьируется от случая к случаю в форме. Я добавляю пользовательский атрибут в тег select.
<select setSeletected="{{data.value}}">
<option value="value1"> value1....
<option value="value2"> value2....
......
в директивах, которые я создал script, который проверяет значение и когда angular заполняет его, задает параметр с этим значением для выбранного.
.directive('setSelected', function(){
restrict: 'A',
link: (scope, element, attrs){
function setSel=(){
//test if the value is defined if not try again if so run the command
if (typeof attrs.setSelected=='undefined'){
window.setTimeout( function(){setSel()},300)
}else{
element.find('[value="'+attrs.setSelected+'"]').prop('selected',true);
}
}
}
setSel()
})
просто перевел это из коффескрипта на лету, по крайней мере, его суть верна, если не отверстие.
Это не самый простой способ, но сделать это, когда значение изменяется
Я бы установил модель в контроллере. Затем по умолчанию будет выбран этот параметр. Пример: HTML:
<select ng-options="..." ng-model="selectedItem">
Angular (используя ресурс):
myResource.items(function(items){
$scope.items=items;
if(items.length>0){
$scope.selectedItem= items[0];
//if you want the first. Could be from config whatever
}
});
Если у вас есть что-то вместо того, чтобы просто инициализировать дату, вы можете использовать ng-init()
, объявив ее в своем контроллере и использовать ее в верхней части вашего HTML.
Эта функция будет работать как конструктор для вашего контроллера, и вы можете инициировать там свои переменные.
angular.module('myApp', [])
.controller('myController', ['$scope', ($scope) => {
$scope.allOptions = [
{ name: 'Apple', value: 'apple' },
{ name: 'Banana', value: 'banana' }
];
$scope.myInit = () => {
$scope.userSelected = 'apple'
// Other initiations can goes here..
}
}]);
<body ng-app="myApp">
<div ng-controller="myController" ng-init="init()">
<select ng-model="userSelected" ng-options="option.value as option.name for option in allOptions"></select>
</div>
</body>
Если вы используете ng-options
для выпадающего списка, чем option
, значение по умолчанию для ng-modal выбрано по умолчанию.
Рассмотрим пример:
<select ng-options="list.key as list.name for list in lists track by list.id" ng-model="selectedItem">
Таким образом, опция, имеющая одинаковое значение list.key
и selectedItem
, выбрана по умолчанию.
попробуйте это в своем контроллере angular...
$somethingHere = {name: 'Something Cool'};
Вы можете установить значение, но вы используете сложный тип, а angular будет искать ключ/значение для установки в вашем представлении.
И если это не сработает, попробуйте следующее: ng-options = "option.value как option.name для опции в опции track по опции .name"
<!--
Using following solution you can set initial
default value at controller as well as after change option selected value shown as default.
-->
<script type="text/javascript">
function myCtrl($scope)
{
//...
$scope.myModel=Initial Default Value; //set default value as required
//..
}
</script>
<select ng-model="myModel"
ng-init="myModel= myModel"
ng-options="option.value as option.name for option in options">
</select>
Мне нужно, чтобы по умолчанию "Пожалуйста, выберите" , чтобы быть не поддающимся выбору. Я также должен был иметь возможность условно установить выбранную по умолчанию.
Я сделал это следующим упрощенным способом: Код JS: // Переверните эти 2, чтобы проверить выбранный по умолчанию или по умолчанию по умолчанию "Пожалуйста, выберите" текст // $scope.defaultOption = 0; $ scope.defaultOption = {key: '3', value: 'Option 3'};
$scope.options = [
{ key: '1', value: 'Option 1' },
{ key: '2', value: 'Option 2' },
{ key: '3', value: 'Option 3' },
{ key: '4', value: 'Option 4' }
];
getOptions();
function getOptions(){
if ($scope.defaultOption != 0)
{ $scope.options.selectedOption = $scope.defaultOption; }
}
HTML:
<select name="OptionSelect" id="OptionSelect" ng-model="options.selectedOption" ng-options="item.value for item in options track by item.key">
<option value="" disabled selected style="display: none;"> -- Please Select -- </option>
</select>
<h1>You selected: {{options.selectedOption.key}}</h1>
Я надеюсь, что это поможет кому-то другому, у которого есть схожие требования.
"Пожалуйста, выберите" был выполнен через Joffrey Outtier, ответьте здесь.
Это работает для меня
ng-selected="true"
ng-init
потому что вы устанавливаете ngModel.
Я думаю, что самый простой способ -
ng-selected="$first"
a **single** hard-coded <option> element ... can be nested into the <select> element.
толькоa **single** hard-coded <option> element ... can be nested into the <select> element.
Опции уже не могут быть частью разметки.