CODEWITHSUNDEEP
google-chromeselectangularjs
chris
chris

Reputation: 6843

Possible bug with angular select using typed value in Chrome

Here is a fiddle: http://jsfiddle.net/NFQFp/

HTML:

<body ng-app ng-controller="bodyCtrl">
<input autofocus="autofocus" ng-model="fname"/>
<select ng-model="state">
<option ng-repeat="st in states" value="{{st}}" ng-selected="state == st">{{st}}</option>
</select>
{{state}}
</body>

JAVASCRIPT:

function bodyCtrl($scope) {
    $scope.state = '';
    $scope.states =["AK","AL","AR","AS","AZ","CA","CO","CT","DC","DE","FL","GA","GU","HI","IA","ID","IL","IN","KS","KY","LA","MA","MD","ME","MH","MI","MN","MO","MS","MT","NC","ND","NE","NH","NJ","NM","NV","NY","OH","OK","OR","PA","PR","PW","RI","SC","SD","TN","TX","UT","VA","VI","VT","WA","WI","WV","WY"]
}

If you tab into the select box and type A then L, the model remains with AK as its value. If you type A then R or A then Z, it works fine. Not sure what is happening here. Seems to be the second of any result set doesn't update the model. AL, CO, DE... etc dont work as expected. This only seems to be a problem when typing, selecting the item from the list updates the model as expected. If you select AL, then AK, then type AL, it will update fine. Could this have something to do with an event not firing from the browser? I am using Chrome, which seems to update the model as you type, unlike firefox which doesn't update it until you blur the select.

Upvotes: 1

Views: 274

Answers (1)

Nikos Paraskevopoulos
Nikos Paraskevopoulos

Reputation: 40308

Don't use ng-repeat with select; use:

<select ng-model="state" ng-options="st for st in states">

See docs.

Now pressing A L goes to AL (you have to press them quickly enough). Fiddle: http://jsfiddle.net/XyaR9/

Upvotes: 2

Related Questions