How to bind an array to select by Angularjs?

Question

I am trying to bind an object array to a select drop down, but I cannot figure out how to make this work, can someone suggest how to make this work?

HTML:

<div ng-app ng-controller="DisplayCtrl">
<select ng-model="eventName" ng-options="name.event for name in eventNames">
    <option value="">Select Event</option>
</select>
<p>Currently selected: {{eventName.description}} </p></div>

AngularJS:

function DisplayCtrl($scope) {
$scope.eventNames = [{
    event: "Function A",
    description: "Gaming"
}, {
    event: "Function B",
    description: "Basketball"
}, {
    event: "Function C",
    description: "Football"
}, {
    event: "Function D",
    description: "Dancing"
}];
$scope.eventName = $scope.eventNames[1].event;}

http://jsfiddle.net/ztABS/

Yoshi · Accepted Answer · 2013-08-28 08:48:29Z

4

With object-arrays, angular will store the real object in the model variable. So your preselection should do the same, thus:

$scope.eventName = $scope.eventNames[1].event;

should be:

$scope.eventName = $scope.eventNames[1];

see:

http://jsbin.com/uyuJuDO/1/

answered Aug 28, 2013 at 8:48

Yoshi

54.8k14 gold badges93 silver badges108 bronze badges

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

Collectives™ on Stack Overflow

How to bind an array to select by Angularjs?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related