Creating ng-options combined with group

[Christian Grobmeier]

hello,

I want to achieve a select box containing that:

Group1

   Item1

   Item2

Group2

   ItemA

   ItemB

The JSON I get from my server looks like:

[

  {

     name : "Group1",

     options : [ { id : 1, name : "Item1"}, { id : 2, name : "Item2"} ]

  },

  {

     name : "Group2",

     options : [ { id : 3, name : "ItemA"}, { id : 4, name : "ItemB"} ]

  }

]

I didnt find docs for ng-options... with some question on SO I could already make something like:

ng-options="label group by value.name for value in stopwatchOptions"

The Result looks like:

Group1

<empty>

Group2

<empty>

Now I am a bit lost... Any ideas how to solve it? I am also willing to rewrite my json service if there is an other proper way to do that.

Thanks for all help

Christian

[Peter Bacon Darwin]

With ng-options group syntax you need the name of the group need to be accessible for each item.  So you basically need to flatten your array:

options = [

 { id : 1, name : "Item1", group: 'Group1'},

 { id : 2, name : "Item2", group: 'Group1'},

 { id : 3, name : "ItemA", group: 'Group2'},

 { id : 4, name : "ItemB", group: 'Group2'}

];

Christian

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en.
 
 

[Christian Grobmeier]

OK thank you. I will try to flatten it.

From the syntax, how would it look like?

"label group by value.name for value in options"
is what I have to select the group names. How can I include option
names and valu ein this expression?

Thanks!
Christian

--
http://www.grobmeier.de
https://www.timeandbill.de

[Peter Bacon Darwin]

Let's suppose you want to select the id but display the name then you would do something like this:

ng-options="value.name as value.id group by value.group for value in options"

[Christian Grobmeier]

Cool. Now that I read it, it makes sense. The syntax was not so
intuitive for me.

Will try it out tomorrow. Thank you for your help so far, I am pretty
much thinking it will help me.

That said, I really miss the docs on ng-options and hope angular.js
will get them soon.

On Sun, Nov 4, 2012 at 10:25 PM, Peter Bacon Darwin

[Peter Bacon Darwin]

The docs are there:  http://docs.angularjs.org/api/ng.directive:select under parameters.  But I agree the syntax is not that intuitive and I always have to check them when I write a select.  I thought about suggesting an alternative that took an object:  { options: 'option in options", value: 'option.id', label: 'option.name', groupBy: 'option.group' } but it is probably no better.

Pete

[Christian Grobmeier]

Wow you made my day. I was sure to have read every corner of the docs.
Thanks again.
Looking at your syntax I like it more. Maybe its still something i
need docs for, but its more the javascript way (using json notation).
The current way is more the half of a SQL way. What I was confused of
was for examle "value.name as value.id". While the other things look
pretty like SQL, this would have a totally different meaning in SQL.
Also appending "for ... in" was not so nice.

That said and looking at the docs, a few more examples would be great.
Maybe, when I have some time...

Thanks again, you really helped me.

Cheers
Christian


On Sun, Nov 4, 2012 at 10:35 PM, Peter Bacon Darwin