CODEWITHSUNDEEP
angularjsangular-material
user3641381
user3641381

Reputation: 1076

md-select show already selected values

So I have the following:

<div layout-gt-sm="row">
    <md-input-container class="md-block" flex-gt-sm>
        <label>Documents</label>
        <md-select multiple ng-model="ctrl.data.documents" placeholder="Documents" ng-controller="DocumentsCtrl"> // I want to show the submitted values.
            <md-option ng-value="doc" ng-repeat="doc in allItems">{{ doc.name }}</md-option> // A list of other values
            <div ng-hide="allItems.length">No items found</div>
        </md-select>
    </md-input-container>
</div>

ctrl.data.documents is an array of already selected values.

What I am trying to achieve is to present this array (ctrl.data.documents) in the field options and a list with the other values which is the ng-repeat in this case. The ng-repeat works just fine. I am able to select other values. But can't figure out how to show the already selected values.

Did some digging I thought ng-options might do it, but can't seem to get it working (not supported ??) and ng-selected did not do the trick as well.

Any help or ideas?

Update #1:

Added a picture of the ctr.data.documents array.

enter image description here

Upvotes: 1

Views: 2520

Answers (1)

kuhnroyal
kuhnroyal

Reputation: 7553

You have to use ng-model-options="{trackBy: '$value.id'}" and ng-repeat="doc in allItems track by doc.id". The id part should be your identifying marker of your document.

<md-select multiple ng-model="ctrl.data.documents"
    ng-model-options="{trackBy: '$value.id'}"
    placeholder="Documents" ng-controller="DocumentsCtrl"> 
    <md-option ng-value="doc" ng-repeat="doc in allItems track by doc.id">{{ doc.name }}</md-option>
    <div ng-hide="allItems.length">No items found</div>
</md-select>

Most of this is documented here: https://material.angularjs.org/latest/api/directive/mdSelect

Upvotes: 1

Related Questions