2016-04-12 1 views
0

私はこのようなJSONファイルを持っています。角度のjsonデータを使用してoptgroupで選択するとng-repeatが返されます

[ 
    {"id":1,"catid":1,"Cat":"Category 1","label":"Label 1"}, 
    {"id":2,"catid":1,"Cat":"Category 1","label":"Label 2"}, 
    {"id":3,"catid":2,"Cat":"Category 2","label":"Label 3"}, 
    {"id":4,"catid":2,"Cat":"Category 2","label":"Label 4"}, 
    {"id":5,"catid":2,"Cat":"Category 2","label":"Label 5"}, 
    {"id":6,"catid":3,"Cat":"Category 3","label":"Label 6"} 
] 

私は上記のすべてを含む選択メニューを作成することができました。

<select> 
    <option ng-repeat="referral in referralList" value="{{referral.id}}">{{referral.label}}</option> 
</select> 

Which produces this... 

<select> 
    <option value="1">Label 1</option> 
    <option value="2">Label 2</option> 
    <option value="3">Label 3</option> 
    <option value="4">Label 4</option> 
    <option value="5">Label 5</option> 
    <option value="6">Label 6</option> 
</select> 

以下のように選択肢内にオプトグループとしてカテゴリを含めるとします。

<select> 
    <optgroup label="Category 1"> 
    <option value="1">Label 1</option> 
    <option value="2">Label 2</option> 
    </optgroup> 
    <optgroup label="Category 2"> 
    <option value="3">Label 3</option> 
    <option value="4">Label 4</option> 
    <option value="5">Label 5</option> 
    </optgroup> 
    <optgroup label="Category 3"> 
    <option value="6">Label 6</option> 
    </optgroup> 
</select> 
+0

の可能性のある重複した[角度フィルタでどのようにすることができます私はグループのデータ?](http://stackoverflow.com/questions/14800862/how-can-i-group-data- with-an-angular-filter) – Michelangelo

答えて

4

このようにしてください。

var app = angular.module("app",[]); 
 

 
app.controller("ctrl" , function($scope){ 
 
    
 
    $scope.data = [ 
 
    {"id":1,"catid":1,"Cat":"Category 1","label":"Label 1"}, 
 
    {"id":2,"catid":1,"Cat":"Category 1","label":"Label 2"}, 
 
    {"id":3,"catid":2,"Cat":"Category 2","label":"Label 3"}, 
 
    {"id":4,"catid":2,"Cat":"Category 2","label":"Label 4"}, 
 
    {"id":5,"catid":2,"Cat":"Category 2","label":"Label 5"}, 
 
    {"id":6,"catid":3,"Cat":"Category 3","label":"Label 6"} 
 
] 
 
    });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="ctrl" class="panel-group" id="accordion"> 
 

 
     <select ng-model="model" ng-options="d.label group by d.Cat for d in data track by d.id"></select> 
 
</div>

+0

それは素晴らしいようですが、私はJSONデータのIDであるオプションの値が必要です –

+0

私は私の答えを更新しました。 –

+0

これは完璧なおかげです。 –