CODEWITHSUNDEEP
angularjs
Vivek Nuna
Vivek Nuna

Reputation: 1

How to use group by in md-select in AngularJS?

I want to bind the below data to the dropdown in two group. one is Text File and another one is RDBMS Categorydropdown image.

1) Text File

a) AWS

b) Azure

c) Mainframe

2) RDBMS

a) Oracle

b) Sybase

c) Teradata

d) MySQL

e) SQLServer

f) DB2

<md-input-container>
        <md-select name="databaseType" ng-change="databaseTypeChange()" ng-model="form.databaseType" class="input-div" required ng-disabled="update && view">
          <md-option  ng-value="databaseType" ng-repeat="databaseType in databaseTypes | groupBy:'databaseType.Category'">{{databaseType.Subcategory}}</md-option>
        </md-select>
        <div ng-messages="DataAccessRoleForm.databaseType.$error">
          <div ng-message="required">required</div>
        </div>
      </md-input-container>

$scope.databaseTypes.push({ "ID": template_id, "Category": category, "Subcategory": template_name, "JsonSchema": schema });

Upvotes: 2

Views: 1106

Answers (1)

Shantanu
Shantanu

Reputation: 3513

You have to handle it with filter filter mate. Get the group name for md-optgroup by having ng-repeat on it & reducing the options array object. so your html coded will look like 

<md-select ng-model="selection" placeholder="Select an Option">
  <md-optgroup label="{{currentGroup}}" ng-repeat="currentGroup in groupList">
    <md-option ng-value="item" ng-repeat="item in items | filter: {group: currentGroup}">{{item.name}}</md-option>
  </md-optgroup>
</md-select>

$scope.groupList = $scope.items.reduce(function(previous, current) {
if (previous.indexOf(current.group) === -1) {
  previous.push(current.group);
}
  //console.log(previous);
  return previous;
}, []);

Here's a working plunker for your requirement

http://plnkr.co/edit/ApuUq7V88ad6uplKjKSC?p=preview

Now this's not as elegant as group by of ng-options but it works fine.

Upvotes: 1

Related Questions