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.

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

Answer 2

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,
    }
]