2013-09-04 9 views
21

私はこの1つのレベルの木のような状況があります。
Angularjs:グループとNG-オプション

<select ng-model="tipost" 
     ng-options="tip.DESC group by tip.TIPIS for tip in tipall"><br> 
</select> 



JSONは次のとおりです。

[ 
    {"ID":"1", "IDPARENT":"0", "TIPIS":"", "DESC":"GroupName1"}, 
    {"ID":"2", "IDPARENT":"1", "TIPIS":"GroupName1", "DESC":"CHILDNAME1"}, 
    {"ID":"3", "IDPARENT":"0", "TIPIS":"", "DESC":"GroupName2"} 
    ] 



は問題があるがこれは子供とオプトグループを作成しますが、を繰り返しますあまりにものルーツ:

- GroupName1 
- GroupName2 
[ GroupName1 ] 
- CHILDNAME1 
[ GroupName2 ] 


私が生産したい:

[ GroupName1 ] 
- CHILDNAME1 
[ GroupName2 ] 


答えて

29

あなたはJSONを変更した場合、グループ化は非常に、そのように動作しません。このようなもの:

[ 
{"ID":"1", "TIPIS":"GroupName1", "DESC":"name"}, 
{"ID":"2", "TIPIS":"GroupName1", "DESC":"name1"}, 
{"ID":"3", "TIPIS":"GroupName2", "DESC":"name2"}, 
{"ID":"4", "TIPIS":"GroupName1", "DESC":"name3"}, 
] 

次に、あなたが

jsFiddleを望むグループ化する方法取得します:http://jsfiddle.net/rtCP3/182/

+0

しかし、彼らはすべての子を持っているし、彼らが持っているOPTGROUPとしていないときのオプションとしてのルーツを表示する方法はありますか?このように私はoptgroupとして、そしてそのグループのオプションとして根を見ることができます。 – daniel

+0

「子どもがいない場合のオプションとしてのルーツ」を選択可能にしますか? –

+0

はい、descとtipisは同じものなので..このように複製します。optgroupは最初のオプションと同じです。 – daniel

5

を私は同じ質問を検索し、より良い答えを見つけました。 getGarageName

ng-options="car.id as car.name + ' (' + car.color + ')' group by getGarageName(car.garageId) for car in cars" 
// this is the data 
cars = [ 
    {"id": 1, "name": "Diablo", "color": "red", "garageId": 1}, 
    {"id": 2, "name": "Countach", "color": "white", "garageId": 1}, 
    {"id": 3, "name": "Clio", "color": "silver", "garageId": 2}, 
    ... 
] 
garages = [ 
    {"id": 1, "name": "Super Garage Deluxe"}, 
    {"id": 2, "name": "Toms Eastside"}, 
    ... 
] 

http://www.wenda.io/questions/2597799/angular-js-select-with-ngoptions-label-the-optgroup.html

6

以下のクエリでその下に簡単な低下がグルー​​プとないアイテムを表示することができ、また、あなたは無効として、いくつかの項目を設定することができますように一つは、彼が必要としてデータを返す関数を使用することができます:ここにplunkです:右厥https://plnkr.co/edit/uhsn4lmzssi6rrijPEAp?p=preview

<select ng-model="ddl.selected" 
    ng-options="item.id as item.text group by item.groupName disable when item.enabled===false for item in ddl.items"></select> 
関連する問題