Как установить значение по умолчанию для поля выбора в angularjs
у меня есть форма, которая используется для редактирования объекта, и я не могу выбрать значение в поле выбора.
у меня есть массив json, который представляет собой редактируемый и выглядит так:
$scope.item = [{
"objectID": "76",
"versionID": "0",
"versionName": "CURRENT",
"objectName": "xyz",
}]
теперь я одновременно заполняю поле выбора из другого массива json, который выглядит следующим образом:
$scope.versions = [{
"id": "0",
"description": "CURRENT",
"name": "CURRENT"
},
{
"id": "114",
"description": "description of Version 2",
"name": "version2"
},
{
"id": "126",
"description": "description of Version 3",
"name": "version3"
},
{
"id": "149",
"description": "description of Version 4",
"name": "version4"
}]
внутри моей веб-страницы я создаю поле выбора следующим образом:
Version:<select ng-model="item.versionID" ng-selected="item.versionID" ng-options="version.name for version in versions" required>
поле выбора заполняется для меня, но оно должно выбирать значение, соответствующее версии в item
. Я пробовал оба versionID
и versionName
, Я даже пытался установить ng-selected="0"
и это даже не работает.
Я посмотрел здесь на SO, сайт Angularjs и googled и прошел через бесчисленные учебники, но все еще испытываю проблемы с этим. Я просто не могу понять, в чем проблема, поэтому любая помощь очень ценится
JSFiddle Добавил
добавлен JsFiddle здесь
7 ответов:
вы можете просто использовать ng-init такой
<select ng-init="somethingHere = options[0]" ng-model="somethingHere" ng-options="option.name for option in options"></select>
Он не устанавливает значение по умолчанию, потому что ваша модель не привязана к свойствам id или name, она привязана к каждому
после поиска и попытки нескольких нерабочих параметров, чтобы получить мой выбор опции по умолчанию работает. Я нахожу чистое решение по адресу: http://www.undefinednull.com/2014/08/11/a-brief-walk-through-of-the-ng-options-in-angularjs/
<select class="ajg-stereo-fader-input-name ajg-select-left" ng-options="option.name for option in selectOptions" ng-model="inputLeft"></select> <select class="ajg-stereo-fader-input-name ajg-select-right" ng-options="option.name for option in selectOptions" ng-model="inputRight"></select> scope.inputLeft = scope.selectOptions[0]; scope.inputRight = scope.selectOptions[1];
согласно документам выберите следующий кусок кода работал для меня.
<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>
<select ng-model="selectedCar" ><option ng-repeat="car in cars " value="{{car.model}}">{{car.model}}</option></select> <script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) { $scope.cars = [{model : "Ford Mustang", color : "red"}, {model : "Fiat 500", color : "white"},{model : "Volvo XC90", color : "black"}]; $scope.selectedCar=$scope.cars[0].model ;});
Если вы даже не хотите инициализировать ng-модель до статического значения, и каждое значение управляется DB, это можно сделать следующим образом. Angular сравнивает вычисленное значение и заполняет выпадающее меню.
здесь ниже modelData.unitId извлекается из БД и сравнивается со списком идентификаторов единиц, который является отдельным списком из БД -
<select id="uomList" ng-init="modelData.unitId" ng-model="modelData.unitId" ng-options="unitOfMeasurement.id as unitOfMeasurement.unitName for unitOfMeasurement in unitOfMeasurements">