grouped select/options from nested data

[Danny]

Hi,

I'd like to create grouped select/options from nested data.

Specifically, the data looks like this:

var carList = ['honda', 'toyota', 'bmw', 'audi', 'trabant', 'new trabant', 'toyota Mark II']; 

var planeList = ['A310', 'A380', 'B373', 'B747'];

$scope.theList = [{group: 'cars', items: carList}, {group: 'planes', items: planeList}]; 

So I'd like that to render as:

<select>

  <optgroup label='cars'>

    <option>honda</option>

    <option>toyota</option>

   ... etc...

  </optgroup>

  <optgroup label='planes'>

    <option>A310</option>

    <option>A380</option>

    ...etc...

  </optgroup>

</select>

Here's a plunk to play: http://plnkr.co/edit/AFkE3JRhFfohhs5ViQUu

I've tried numerous combinations but can't get the structure I need.  Is it possible to render the grouped list without restructuring the data?

Thanks!

Danny

[Clint Checketts]

You need the list to be 'flat' Plunkr: http://plnkr.co/edit/gYoYDhKA58SxcYSwvRZr?p=preview

As in:

<select ng-model='theModel' ng-options='veh.name group by veh.type for veh in theList'></select>

$scope.theList = [
    {type:'car',name:'honda'},
    {type:'car',name:'toyota'},
    {type:'car',name:'bmw'},
    {type:'car',name:'audi'},
    {type:'car',name:'trabant'},
    {type:'car',name:'new trabant'},
    {type:'car',name:'toyota Mark II'},
    {type:'plane',name:'A310'},
    {type:'plane',name:'A380'},
    {type:'plane',name:'B373'},
    {type:'plane',name:'B747'}
    ];

});

Danny

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Clint Checketts]

Sorry about not answering the second part of your question:  You can create a helper method that reduces the 2 separate arrays into the flattened array.

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

[Danny]

Thanks Clint... that was helpful.

I have also found another way to do it... obvious really, just was distracted by the complexities of Angular.  

For those interested, the new solution:

    <select ng-model='theModel'>

      <option value='choose...'>Choose...</option>

      <optgroup ng-repeat='group in theList' label="{{group.group}}">

        <option ng-repeat='veh in group.items'>{{veh}}</option>

      </optgroup>

    </select>

Updated plunk: http://plnkr.co/edit/PzXtExf7SkDvtf78cdnb

Danny

 

[Peter Stephens]

Thanks Danny - exactly the problem I was struggling with....

Pete.

[Sylvain Robez-Masson]

My problem is different, my data looks like this :

var categories = [

    {"id":"Cart","name":"Ma commande"},

    {"id":18,"name":"Menus"},

    {"id":14,"name":"Entr\u00e9es"},

    {"id":5,"name":"Plats","items":[

        {"id":7,"name":"Viandes"},

                {"id":8,"name":"Poissons"},

                {"id":11,"name":"Pizzas"}]

        },

        {"id":15,"name":"Desserts"},

        {"id":17,"name":"Boissons","items":[

                {"id":1,"name":"Alcoolis\u00e9es"},

                {"id":3,"name":"Sans alcool"}]

        }

]

Entries without items should be <option>, Entries with items should be <optgroup> and the items of the entry must be <option> of <optgroup>

How can I achieve that ?

[Charles Kilbourne]

Sylvain you may want to use an ng-switch in your template, if you want an example set up a plunk and I'll try to help you out

[Sylvain Robez-Masson]

I don't see any solution with ng-switch.

Maybe something like that : http://jsfiddle.net/vDdG2/2/

But obviously that doesn't work.

[Sylvain Robez-Masson]

I found a solution : http://jsfiddle.net/vDdG2/5/

[krunal shah]

hi i would like to select parent node into dropdown. Like group is also selected..

[Phani K]

Hi,

I want to select the group name and click event for group name. any help...

in below example..i want to select Group1.

Ex: 

Group1

    A

    B

Group2

     C

     D