Thursday, 5 September 2013

Initializing select with AngularJS and ng-repeat

Initializing select with AngularJS and ng-repeat

I'm trying to get a select to start off with one option pre-selected using
AngularJS 1.1.5 and ng-repeat. Instead the select always starts out with
nothing selected. It also has an empty option, which I don't want -- but I
think that is a side effect of nothing being selected.
I can get this working using ng-options instead of ng-repeat, but I want
to use ng-repeat for this case. Although my narrowed down example doesn't
show it, I also want to set the title attribute of each option, and there
is no way to do that using ng-options, as far as I know.
I don't think this is related to the common AngularJs scope/prototypical
inheritance issue. At least I don't see anything obvious when inspecting
in Batarang. Plus, when you pick an option in the select with the UI, the
model does update correctly.
Here's the HTML:
<body ng-app ng-controller="AppCtrl">
<div>Operator is: {{filterCondition.operator}}</div>
<select ng-model="filterCondition.operator">
<option ng-repeat="operator in operators"
value="{{operator.value}}">{{operator.displayName}}</option>
</select>
</body>
And the JavaScript:
function AppCtrl($scope) {
$scope.filterCondition={
operator: 'eq'
}
$scope.operators = [
{value: 'eq', displayName: 'equals'},
{value: 'neq', displayName: 'not equal'}
]
}
And the JS Fiddle: http://jsfiddle.net/coverbeck/FxM3B/2/
Thanks for any help,
Charles

No comments:

Post a Comment