angular js multiple select to single drop down conversion

Question

I have a multiselect drop down but I only want to select one of the options and then when that modal opens have that dropdown selection saved.

right now the dropdown is multi and when i close the modal, the values are still selected. I want this same functionality but in a single select dropdown. Not sure what I am missing.

           <md-select ng-model="itemSet.filters["names"].values" multiple aria-label="{{itemSet.filters["names"].label}}">
                 <md-option ng-value="item" ng-repeat="item in itemSet.filters["names"].options">{{item.label}}</md-option>
              </md-select>

when I remove the multiple option in the md-select i get the error in console : this.values.forEach is not a function
this is my itemSet names object.

'names': {
            class: 'Filter',
            name: 'names',
            label: 'names',
            labelField: 'label',
            options: [
                            {
                                label: 'filled',
                                api: 'table',
                                key: '!VACANT'                              
                            },
                            {
                                label: 'vacant',
                                api: 'table',
                                key: 'VACANT'   
                            }
            ]

pretty much stuck at this point and any guidance would be super cool. I just want to be able to select one from the dropdown and then keep that there when the modal that has this opens up.

score 0 · Accepted Answer · answered Aug 03 '21 at 02:17

When in multiple mode, ng-model is an array of values. But since you got rid of the multiple attribute, it contains only the single selected value, which of course has no forEach method. You have not included the controller code where you iterate over this.values, but that's where you need to change things, as well as changing the dropdown to:

<md-select ng-model="itemSet.filters["names"].value" aria-label="{{itemSet.filters["names"].label}}">
    <md-option ng-value="item" ng-repeat="item in itemSet.filters["names"].options">{{item.label}}</md-option>
</md-select>

In your controller, use this.value directly (assuming this === itemSet.filters["names"]).

angular js multiple select to single drop down conversion

1 Answers1