Я видел документацию директивы select Angular здесь: 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"
Что я делаю неправильно?
Итак, предположим, что объект находится в вашей области:
<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"]
};
}
Рабочий Plunkr: http://plnkr.co/edit/wTRXZYEPrZJRizEltQ2g
Документация angular для выбора * не отвечает на этот вопрос явно, но она есть. Если вы посмотрите на 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
Этот ответ более полезен, когда вы приносите данные из БД, вносите изменения и затем сохраняете изменения.
<select ng-options="opt.id as opt.name for opt in users" ng-model="selectedUser"></select>
Посмотрите пример здесь:
<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>
Если ваш массив объектов сложный, например:
$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>
Я боролся с этим в течение нескольких часов, поэтому я хотел бы добавить некоторые пояснения к нему, все примеры, отмеченные здесь, относятся к случаям, когда данные загружаются из самого script, а не из того, что происходит от службе или базе данных, поэтому я хотел бы предоставить свой опыт для тех, кто имеет ту же проблему, что и я.
Обычно вы сохраняете только идентификатор нужного параметра в своей базе данных, поэтому... пусть покажет его
<я > 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", это просто равное значение, также " в качестве модели .name" - это метка для ретранслятора, наконец, модель в моделях" - это всего лишь регулярный цикл, о котором мы все знаем.
Надеюсь, это поможет кому-то, и если да, пожалуйста, проголосуйте: D
<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>
Просто добавьте опцию с пустым значением. Он будет работать.
Более простой способ сделать это - использовать 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
Атрибут ng-model устанавливает выбранную опцию, а также позволяет пропустить фильтр, например 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];
Если кто-то использует значение по умолчанию, которое иногда не заполняется на странице в Chrome, IE 10/11, Firefox - попробуйте добавить этот атрибут в поле ввода/выбора, проверяя заполненную переменную в HTML, например
<input data-ng-model="vm.x" data-ng-if="vm.x !== '' && vm.x !== undefined && vm.x !== null" />
Это действительно просто, если вы не заботитесь об индексации своих опций с каким-либо числовым идентификатором.
Объявите свой $ scope var - people array
$scope.people= ["", "YOU", "ME"];
В DOM вышеуказанного объема создайте объект
<select ng-model="hired" ng-options = "who for who in people"></select>
В вашем контроллере вы устанавливаете свою ng-модель как "нанятую".
$scope.hired = "ME";
Удачи!!! Это действительно легко!
Просто чтобы сложить, я сделал что-то вроде этого.
<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>