Dropdown in AngularJS

Question

Ich habe Dropdown-Code unter Verwendung von Daten-ng-Optionen funktionieren perfekt unter:

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

Das unten mit md-Optionscode ersetzt werden muss:

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

Das Problem, das ich bin bekommen ist, dass md-option dropdown aber ohne option einzelteile. Der Grund meiner Änderung in md-Option ist, weil es besser aus UI Perspektive aussieht. Irgendeine Idee, wie es funktioniert, bitte.

Answer 1

Wenn Sie eine Gruppierung durchführen möchten, müssen Sie die Filterdirektiven von angular-filter.js einfügen und dann groupBy verwenden. Nachfolgend finden Sie ein Beispiel, das dasselbe implementiert!

JSFiddle Demo

Sie die Syntax für ng-options, aber Sie haben den Code für ng-repeat geschrieben, hier ist eine funktionierende Version des Codes.

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

Sie können wie folgt tun:

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