2017-07-08 37 views
1

我想將下面的數據綁定到兩個組的下拉列表中。一個是文本文件,另一個是RDBMS類別dropdown image如何在AngularJS的md-select中使用group by?

1)文本文件

一個)AWS

B)天青

c)中大型機

2)RDBMS

一個)的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 }); 

回答

1

您有過濾器過濾的隊友來處理它。通過ng-repeat獲取md-optgroup的組名&減少選項數組對象。所以你的HTML編碼會像

<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; 
}, []); 

下面是你需要一個工作plunker

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

現在,這並不像一羣優雅的的NG-選項,但它工作正常。