I have a md-select
set up as follows:
<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
value is
[
{
"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"
}
]
The md-select
works fine. But what I can't figure out is how to set select value. When I try setting the model current.Category
to one of the values from the $scope.categories
it doesn't get set.
The documentation isn't explicit, but you should use ng-selected
. I've created a codepen to illustrate, but basically:
<md-option ng-repeat="(index,item) in categories" ng-value="{{item}}"
ng-selected="index == 1">
{{item.Name}}
</md-option>
This'll select the the second category (index 1 in your category array).
You need to use ng-model-options, trackBy and choose a unique model field as a selector:
<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>
This solution is described in Angular Material's official documentation.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With