HTML select with angular bind

Question

I was doing the mockup page with using angular JS and html only. I wonder if there is faster that can dynamic bind the selected value in HTML to the angular object Such as if I have sth like:

      item.dropdownvalue = 0;

      <select>
             <option value=0>Pre-Launch</option>
             <option value=1>Active</option>
             <option value=2>Complete</option>
       </select>

That I can bind it to the dropwown so it turn to be:

       <select>
             <option value=0 selected>Pre-Launch</option>
             <option value=1>Active</option>
             <option value=2>Complete</option>
       </select>

Just like the HTML Dropdown Helper in MVC5

I'm not sure exactly what you're asking but have you looked at the Angular select options at docs.angularjs.org/api/ng/directive/select? — rtucker88
– rtucker88, Commented Oct 30, 2014 at 1:22

Mike · Accepted Answer · 2014-10-31 02:11:12Z

1

SIMPLIFIED:

If you're just wanting to affect the selected state, you can do your own HTML and just bind a scope value to the selected option via ng-model. See simplified Plunker at http://plnkr.co/edit/YIwBhEQOKDFgjKmv9Qvy?p=preview

ORIGINAL ANSWER:

This can be accomplished by having an array with your values and building the select with the ng-options Angular directive:

<select name="state" ng-model="dropdownvalue" ng-options="states.indexOf(state) as state for state in states"></select>

You can see this in action in the following Plunker: http://plnkr.co/edit/HY9Zpzbe9MhrYCVdNtgi?p=preview

edited Oct 31, 2014 at 2:11

answered Oct 30, 2014 at 2:54

Mike

1,2461 gold badge7 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ricc Over a year ago

Hum I am looking for a more simple solution that I can do it without create the state, but thanks of your work

Mike Over a year ago

Did a simplified version that doesn't build the options in Angular and only relies on the data binding to create the selected option. Is this what you're looking for? If this helps, please upvote and award the answer. Best of luck!

Collectives™ on Stack Overflow

HTML select with angular bind

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related