Dropdown in AngularJs

Question

I have Dropdown code using data-ng-options work perfectly below:

<select ng-model="selected" data-ng-options="c as c.title group by c.type for c in VacanciesWithSavedSearches | orderBy: ['type','title']"></select>

This needs to be replaced with md-option code below:

<md-input-container class="md-block" style="margin:0 !important;">
    <md-select ng-model="VacancySavedSearch" placeholder="Select a Vacancy Or Saved Search" id="Md-selectvss1" name="vss">
        <md-option ng-value="c" ng-repeat="c as c.title group by c.type for c in VacanciesWithSavedSearches | orderBy: ['type','title']">
            {{vs.title}}
        </md-option>
    </md-select>
</md-input-container>

The problem I am getting is that md-option does render dropdown but with no option items. The reason of my change into md-option is because it looks better from UI prospective. Any idea how to get it working please.

Naren Murali · Accepted Answer · 2017-09-14 14:20:22Z

1

If you want to do grouping you need to include the filter directives from angular-filter.js and then use groupBy. Please find below and example implementing the same!

JSFiddle Demo

You are using the syntax for ng-options, but you have written the code for ng-repeat, here is a working version of your code.

JSFiddle Demo

HTML:

<div ng-app='home'>
  <!-- App goes here -->
  <md-content layout-padding ng-controller="MainCtrl as mainCtrl">
    <md-input-container class="md-block" style="margin:0 !important;">
      <md-select ng-model="VacancySavedSearch" placeholder="Select a Vacancy Or Saved Search" id="Md-selectvss1" name="vss">
        <md-option ng-value="c" ng-repeat="c in VacanciesWithSavedSearches | orderBy: ['type','title']">{{c.title}}</md-option>
      </md-select>
    </md-input-container>
  </md-content>
</div>

edited Sep 14, 2017 at 14:20

answered Sep 14, 2017 at 14:05

Naren Murali

66.1k6 gold badges51 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user8427641 Over a year ago

It display dropdown options but how do I add group by?

Naren Murali Over a year ago

@user8427641 Does this help you?

user8427641 Over a year ago

It work perfectly on your example but not when I try to use it on my page. For somereasons the my $scope collection keep adding _CHANGED":false as soon as I add groupBy in my ng-repeat.

Naren Murali Over a year ago

@user8427641 can you use my fiddle I gave and try to replicate the issue and share with me?

Raghav · Accepted Answer · 2017-09-19 07:13:45Z

0

You can do like this:

<md-input-container >
    <label>Select the country</label>
    <md-select ng-model="user.country_id" required style="width: 183px;">
        <md-option ng-value="item.id" ng-repeat="item in countries">{{ item.country_name }}</md-option>
    </md-select>
</md-input-container>

Controller.js

$scope.countries = [
    {
        "country_name": "India",
        "id": 1,
    },
    {
        "country_name": "Australia",
        "id": 2,
    }
]

edited Sep 19, 2017 at 7:13

answered Sep 14, 2017 at 14:13

Raghav

1,2294 gold badges19 silver badges35 bronze badges

Collectives™ on Stack Overflow

Dropdown in AngularJs

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related