Regression using ngOptions asynchronously in angular 1.3

Hi guys,

Just wanted to start by saying that Angular is a wonderful project and I'm having a great time working with it :)

I have an example of the issue in this jsFiddle: http://jsfiddle.net/88aw4yyq/

Consider this HTML:

<select name="test"
        ng-model="test"
        ng-options="opt.id as opt.label for opt in availableOptions">
</select>

And this controller:

$scope.test = '';
$scope.availableOptions = [];

$timeout(function () {
    $scope.availableOptions = [
        {id: '', label: 'Please select...'},
        {id: 1, label: 'opt1'},
        {id: 2, label: 'opt2'}
    ];
}, 1000);

The $timeout simulates any regular AJAX request. {id: '', label: 'Please select...'} is added for convenience for the user.

Expected behavior: 'Please select...' should be selected once the data is loaded.

Actual behavior: An empty option is added on top in the select field.

Angular versions: 1.3.0 this is a regression, 1.2.x was working fine.

Browser versions: Tested on Fx/Chrome (latest versions) on both OS X & Windows.

If anyone else is encountering the issue, here is a workaround:

$scope.test = '';
$scope.availableOptions = [
    {id: '', label: 'Please select...'}
];

$timeout(function () {
    $scope.availableOptions = $scope.availableOptions.concat([
        {id: 1, label: 'opt1'},
        {id: 2, label: 'opt2'}
    ]);
}, 1000);

I just ran into this same issue (plunker here: http://plnkr.co/edit/NgPGrklA3ng6bmnPjxmw?p=preview) and ended up with the same solution (pre-filling the options holder with the known selected value). The workaround is kind of ugly but not terrible.

Tested in Firefox, Chrome and Safari but did not see the behavior in Firefox. Only tested on OS X.

Can you assign this to me? I think I see the problem, and I'll try to get a pull request ready for tomorrow.

fix(select): allow $timeout to initialize ngOptions

fix(select): allow ngOptions to be set in $timeout

maybe it cause by the code

self.addOption = function(value, element) {
    assertNotHasOwnProperty(value, '"option value"');
    optionsMap[value] = true;

    if (ngModelCtrl.$viewValue == value) {
      $element.val(value);
      if (unknownOption.parent()) unknownOption.remove();
    }
    // Workaround for https://code.google.com/p/chromium/issues/detail?id=381459
    // Adding an <option selected="selected"> element to a <select required="required"> should
    // automatically select the new element
    if (element && element[0].hasAttribute('selected')) {
      element[0].selected = true;
    }
};

and the code make the select don't show the real value.

if (ngModelCtrl.$viewValue == value) {
      $element.val(value);
      if (unknownOption.parent()) unknownOption.remove();
}

fix(ngOptions): ensure that the correct option is selected when optio…

@angrytoro

@angrytoro - this is the right idea but ngOptions needs a full refactoring, I have provided a PR in #10639...

fix(ngOptions): ensure that the correct option is selected when optio…

Navigation Menu

Repository navigation

Regression using ngOptions asynchronously in angular 1.3 #9714

39 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Regression using ngOptions asynchronously in angular 1.3 #9714

Description

Activity

anotherchrisberry commented on Oct 29, 2014

ajohnston256 commented on Nov 22, 2014

39 remaining items

angrytoro commented on Dec 29, 2014

petebacondarwin commented on Jan 4, 2015

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions