Angularjs default value for bound select [duplicate]

Question

Possible Duplicate:
How to make a preselection for a select list generated by AngularJS?

In the angular tutorial they set a sortOrder scope variable that defaults the sort by select to 'Newest'.

In my fiddle I am doing similar but my select value is not selected. Instead i get the blank entry as if i did not set any value in the scope. Yet I can see my sort order and i am emitting the value of the select and it is preset.

    //set a default this way also, but not updating the dropdown
$scope.ddlFilter = {
    name: "All Open Events",//doesn't matter what this is, only cares about value
    value: "ALL"//"OPEN"
};

I know i can use ng-init to set defaults but i want to be able to do it this way as well. Any suggestions?

See the link above -- your answer is $scope.ddlFilter = $scope.eventFilters[2]; -- the ng-model must reference an element from the same array used in ng-options. — Mark Rajcok
– Mark Rajcok, Commented Jan 31, 2013 at 3:51

Jay · Accepted Answer · 2013-01-31 03:54:57Z

6

Try using an object instead of an array of objects. It will allow you to reference what you want by a string vs. an array position such as scope.eventFilters[0].

$scope.eventFilters = {
    "OPEN": "All Open Events",
    "UNMAPPED": "All Un-Mapped Events",
    "MAPPED": "All Mapped Events",
    "CLOSED": "All Closed Events (past 8 hours)",
    "ALL": "All Events",
    "OTHER": "Other OpCenter Open Events"
};

And then define the default value as a string (key for the object above):

$scope.ddlFilter = "MAPPED";

And then on the page change your select to

<select ng-model="ddlFilter" ng-options="k as v for (k, v) in eventFilters"></select>

and your filter no longer needs a .value, so it will become:

<tr ng:repeat="event in events  | myEventFilter:ddlFilter | orderBy:sort.column:sort.descending">

See your modified code working here: http://jsfiddle.net/WXLte/2/

edited Jan 31, 2013 at 3:54

answered Jan 31, 2013 at 3:49

Jay

20k11 gold badges56 silver badges72 bronze badges

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

4 Comments

VBAHole Over a year ago

very nice. thank you much.

VBAHole Over a year ago

I have run into a slight issue with this one unfortunately. The dropdown that i want to fill not only contains those values i have listed here (which you helped me get into an object instead of an array) but there is also a dynamic set of options i need to glom onto this set to be loaded in the dropdown. Those extra values come from an $http call and they come in as name/value pairs. How can i blend those new values with this existing set?

Jay Over a year ago

Make a new question that is more specific to this new issue - This one has been closed. There are a lot of people who can help you if you make it a new question (you can link back to this question if you'd like)

Jay Over a year ago

And, I think what you're looking for is docs.angularjs.org/api/angular.extend (It will extend the current object with new properties). It works a lot like jQuerys version.

Collectives™ on Stack Overflow

Angularjs default value for bound select [duplicate]

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related