How can I convert normal <select> menu to <ul> list?

[Khaled Attia]

Hello Guys,

I really need your help, I want to convert normal <select> menu to <ul> list?

ex:

<select>

    <option value="test_1">Test #1</option>
    <option value="test_2">Test #2</option>

</select>

to

<ul>

    <li id="test_1">Test #1</li>
    <li id="test_2">Test #2</li>

</ul>

I really appreciate your help.

Thanks.

[Clint Checketts]

You can't 'convert' or transform the DOM elements. Sounds like you want to have an 'edit' mode and a 'read only' mode.

You could either manually have a ng-repeat that you show/hide depending on your state, or manually create a directive that handles the swapping. If you want to go down the directive path and are getting stumped, post a http://plnkr.co with what you have.

-Clint

--
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.
 
 

[Khaled Attia]

Hello Clint,

Actually, I want to convert the select menu to <ul> list, so I can customize it as I want

Here is example

I want to convert single select menu to be list of radios

and if it multiple-select menu I want to convert it to checkbox menu

[Clint Checketts]

That looks like a good idea for a good UI. So what is your question? Are you asking what the HTML would look like, or you want to use the HTML of <select> etc and have the DOM render as you indicated in the images? 

I think you'll have a hard time 'converting' a <select> into the rendered output in your image. That is more like a jQuery  progressive enhancement thing. That doesn't feel like a very Angular approach. I'd expect you'd rather use input type="radio" and use ng-repeat as an equivalent, without re-creating select/ng-options directives.

[Khaled Attia]

My plan is creating directive and than handle the select menu and generate ul list

But I don't know how to parse the element.

I think I will go with jQuery :(

[Clint Checketts]

I didn't mean to dissuade you from using angular to solve it. For example the <select> directive has extra complexity around supporting optGroup and things, but it would be cool to create a separate directive that would behave like a single or multi select and meet your needs. Call it expandedOptions or something. ;)

I'd be happy to coach you along sending plunkrs back and forth. In regards to parsing the the element, you can use the attr parameter in the linking function to snag values and bindings.