CODEWITHSUNDEEP
angularjsangular-material
americanslon
americanslon

Reputation: 4298

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.

Upvotes: 24

Views: 49094

Answers (7)

Max Pringle
Max Pringle

Reputation: 639

This solution is simple if you are wanting to default to the first value in the drop down.

Use the ng-select="$first". This will default the drop down to the first value.

<md-select placeholder="Categories" ng-model="current.category">
   <md-option ng-repeat="(index, item) in categories" value="{{item}}"
              ng-selected="$first">{{item.Name}}</md-option>
</md-select>

Here is a CodePen to demonstrate.

Upvotes: 2

Kapil Bhalala
Kapil Bhalala

Reputation: 1

Use value in ng-option insted of ng-value

Upvotes: 0

masitko
masitko

Reputation: 609

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.

Upvotes: 18

Francesco
Francesco

Reputation: 10870

In my case adding ng-model-options="{trackBy: '$value.id'}" as described in the docs did not work, as no initial value was set.

By explicitly setting the model to the wished default value in the controller properly set the value as desired. This approach might be easier if you do not know up front the index of the element you want to display as pre-selected (using ng-selected). Of course you can evaluate it in the controller, but to me it seems more immediate to set the target element directly to the model.

View:

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

Controller:

function initialize() {
        vm.globalFilterValues = globalFilterValues;
        vm.selectedGlobalFilter = TransferGlobalFilter.Worldwide;
    }

Where globalFilterValues are in the form:

[
  {key:"All", value:"All values" },
  {key:"Manager", value:"Manager"},
  {key:"HR", value:"Human resources"},
]

Upvotes: 0

BERGUIGA Mohamed Amine
BERGUIGA Mohamed Amine

Reputation: 6300

in order to set the default value of select you can use ng-selected and 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>

Upvotes: 4

Huey
Huey

Reputation: 5220

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

Upvotes: 34

Ameur fahd
Ameur fahd

Reputation: 21

Like specified in the doc of md-select directive , you can use ng-model-options.

See this post

Upvotes: -3

Related Questions