Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

md-select can't set selected value

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.

like image 482
americanslon Avatar asked Aug 07 '15 15:08

americanslon


2 Answers

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).

like image 125
Huey Avatar answered Oct 30 '22 14:10

Huey


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.

like image 18
masitko Avatar answered Oct 30 '22 12:10

masitko