Select elements bound to a scope property with a value of null will add an extra option #11872

divercraig · 2015-05-14T08:33:31Z

On upgrading from angular 1.2.23 to 1.3.15 I noticed a bug when select elements are bound using ng-model to a scope property which is predefined as null. These elements render an additional option elements which looks like <option value="? object:null ?"></option>, the result of this as an extra blank option on the dropdown.

The following code sample demonstrates the problem by comparing a select bound to a null property with a select bound to an undefined property.

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>

  <script>
    var module = angular.module('app', []);
    module.controller('AppCtrl', ['$scope', function($scope){
        $scope.defined = null;
    }]);
  </script>
</head>

<body ng-controller="AppCtrl">

    <p>Defined Variable:</p>
    <p ng-bind="defined"></p>
    <form>
        <select ng-model="defined" name="select-defined" id="select-defined">
            <option value=""> -- Please Select one --</option>
            <option value="a"> A </option>
            <option value="b"> B </option>
            <option value="c"> C </option>
        </select>
    </form>

    <p>Undefined Variable:</p>
    <p ng-bind="foo"></p>
    <form>
        <select ng-model="foo" name="select-undefined" id="select-undefined">
            <option value=""> -- Please Select one --</option>
            <option value="a"> A</option>
            <option value="b"> B</option>
            <option value="c"> C</option>
        </select>
    </form>
</body>
</html>

I've tested this with 1.4.0-rc.2 and the problem still exists.
I believe the fix should be to treat null properties the same as undefined.

The text was updated successfully, but these errors were encountered:

…to null property If a select directive was bound, using ng-model, to a property with a value of null this would result in an unknown option being added to the select element with the value "? object:null ?". This change prevents a null value from adding an unknown option meaning that the extra option is not added as a child of the select element Closes angular#11872

…to null property If a select directive was bound, using ng-model, to a property with a value of null this would result in an unknown option being added to the select element with the value "? object:null ?". This change prevents a null value from adding an unknown option meaning that the extra option is not added as a child of the select element. Since select (without ngOptions) can only have string value options then `null` was never a viable option value, so this is not a breaking change. Closes #11872 Closes #11875

…to null property If a select directive was bound, using ng-model, to a property with a value of null this would result in an unknown option being added to the select element with the value "? object:null ?". This change prevents a null value from adding an unknown option meaning that the extra option is not added as a child of the select element. Since select (without ngOptions) can only have string value options then `null` was never a viable option value, so this is not a breaking change. Closes angular#11872 Closes angular#11875

This was referenced May 14, 2015

fix(select): prevent unknown option being added to select when bound … #11873

Closed

fix(select): prevent unknown option being added to select when bound … #11874

Closed

divercraig mentioned this issue May 14, 2015

fix(select): prevent unknown option being added to select when bound … #11875

Closed

petebacondarwin added this to the 1.4.0-rc.3 milestone May 18, 2015

petebacondarwin added type: bug component: forms labels May 18, 2015

petebacondarwin modified the milestones: 1.4.0-rc.3, 1.4.x - jaracimrman-existence May 18, 2015

petebacondarwin closed this as completed in 4090491 May 18, 2015

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Select elements bound to a scope property with a value of null will add an extra option #11872

Select elements bound to a scope property with a value of null will add an extra option #11872

divercraig commented May 14, 2015

Select elements bound to a scope property with a value of null will add an extra option #11872

Select elements bound to a scope property with a value of null will add an extra option #11872

Comments

divercraig commented May 14, 2015