У меня есть md-select, настроенный следующим образом:
<md-select placeholder="Category" ng-model="current.Category" flex >
<md-option ng-repeat="item in categories" ng-value="{{item}}">{{item.Name}}</md-option>
</md-select>
@scope.categories Значение
[
{
"Name":"Commercial & Industrial",
"ParentId":null,
"Categories":[
{
"Name":"Deceptive Marketing",
"ParentId":19,
"Categories":[
],
"Id":24,
"ModifiedDate":"2015-08-06T07:49:53.0489545",
"CreatedDate":"2015-08-06T15:49:51.707"
},
{
"Name":"Aggressive Agents",
"ParentId":19,
"Categories":[
],
"Id":25,
"ModifiedDate":"2015-08-06T07:50:10.0026497",
"CreatedDate":"2015-08-06T15:50:08.63"
}
],
"Id":19,
"ModifiedDate":"08/06/2015 @ 7:49AM",
"CreatedDate":"08/06/2015 @ 3:49PM"
},
{
"Name":"Competitive Supply",
"ParentId":null,
"Categories":[
{
"Name":"Security Deposit",
"ParentId":20,
"Categories":[
],
"Id":21,
"ModifiedDate":"2015-08-06T07:49:30.3966895",
"CreatedDate":"2015-08-06T15:49:25.8"
},
{
"Name":"Meter",
"ParentId":20,
"Categories":[
],
"Id":22,
"ModifiedDate":"2015-08-06T07:49:34.6571155",
"CreatedDate":"2015-08-06T15:49:33.3"
},
{
"Name":"Bill",
"ParentId":20,
"Categories":[
],
"Id":23,
"ModifiedDate":"2015-08-06T07:49:41.7268224",
"CreatedDate":"2015-08-06T15:49:40.357"
}
],
"Id":20,
"ModifiedDate":"08/06/2015 @ 7:49AM",
"CreatedDate":"08/06/2015 @ 3:49PM"
}
]
md-select работает отлично. Но я не могу понять, как установить значение выбора. Когда я пытаюсь установить модель current.Category на одно из значений из $scope.categories, оно не будет установлено.
Документация не является явной, но вы должны использовать ng-selected. Я создал codepen для иллюстрации, но в основном:
<md-option ng-repeat="(index,item) in categories" ng-value="{{item}}"
ng-selected="index == 1">
{{item.Name}}
</md-option>
Это позволит выбрать вторую категорию (индекс 1 в вашем массиве категорий).
Вам нужно использовать ng-model-options, trackBy и выбрать в качестве селектора уникальное поле модели:
<md-select placeholder="Category"
ng-model="current.Category"
ng-model-options="{trackBy: '$value.Id' }" // <-- unique field 'Id'
flex >
<md-option
ng-repeat="item in categories"
ng-value="{{item}}">{{item.Name}}</md-option>
</md-select>
Это решение описано в официальной документации Angular Material .
чтобы установить значение по умолчанию для выбора, вы можете использовать ng-selected и ng-model
<md-select ng-model="vmIdPage.number">
<md-option ng-value="mod" ng-repeat="mod in vmIdPage.initObject.listeModaliteMisePlace" ng-selected="{{ mod.id === vmIdPage.number.id ? 'true' : 'false' }}">
{{mod.libelle}}
</md-option>
</md-select>
В моем случае добавление ng-model-options="{trackBy: '$value.id'}", как описано в docs, не работало, так как начальное значение не было установлено.
При явной настройке модели на желаемое значение по умолчанию в контроллере правильно установите значение по желанию. Этот подход может быть проще, если вы не знаете перед индексом элемента, который хотите отобразить, как предварительно выбранный (используя ng-selected). Конечно, вы можете оценить его в контроллере, но для меня кажется более непосредственным установить целевой элемент непосредственно в модель.
Вид:
<div class="input-style-border">
<md-select ng-model="vm.selectedGlobalFilter">
<md-option ng-value="item" ng-repeat="item in vm.globalFilterValues">
{{item.value}}
</md-option>
</md-select>
</div>
Контроллер:
function initialize() {
vm.globalFilterValues = globalFilterValues;
vm.selectedGlobalFilter = TransferGlobalFilter.Worldwide;
}
Где globalFilterValues находятся в форме:
[
{key:"All", value:"All values" },
{key:"Manager", value:"Manager"},
{key:"HR", value:"Human resources"},
]
Использовать значение в ng-option insted ng-value
Как указано в директиве md-select, вы можете использовать опции ng-model.
Смотрите post