Angular tutorial Step 4 :: Assigning default value to select issue

Question

I am going thru AngularJs tutorial. In step 4 http://docs.angularjs.org/tutorial/step_04 instead of hard coded Select tag I created a JavaScript object just to test.

This is the javascript code I added to controller.js

 $scope.sortOptions = [{
        "optionValue": "name",
        "desc": "Alphabetical"
    }, {
        "optionValue": "age",
        "desc": "Newest"
    }];

Now $scope.orderProp = "age" is not working. (which suppose to set default value for the select). I want to know what is issue here.

jsfiddle.net/Khuzema/m6Z5Z/1

Khuzema
– Khuzema

2013-01-22 00:38:30 +00:00
Commented Jan 22, 2013 at 0:38 — Khuzema
– Khuzema, Commented Jan 22, 2013 at 0:38

Ben · Accepted Answer · 2013-06-03 12:48:41Z

6

Use the ng-options attribute on the <select> to create the <option> entries, like this:

<select ng-model="orderProp" 
        ng-options="option.optionValue as option.desc for option in sortOptions">                        
</select>

The option.optionValue as option.desc for option in sortOptions corresponds to:

iterate over the sortOptions array and assign each item to a option variable
set the label of each <option> as option.desc
set the value of each <option> as option.optionValue

More information about this here: http://docs.angularjs.org/api/ng.directive:select

jsFiddle: http://jsfiddle.net/bmleite/m6Z5Z/2/

edited Jun 3, 2013 at 12:48

Ben

62.7k117 gold badges330 silver badges505 bronze badges

answered Jan 22, 2013 at 0:49

bmleite

26.9k4 gold badges74 silver badges46 bronze badges

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

Collectives™ on Stack Overflow

Angular tutorial Step 4 :: Assigning default value to select issue

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related