AngularJS select directive not working with option

Question

This example seems simple enough, I just can't seem to figure out why it is not working (I don't want to use ng-options because that doesn't work with select2, a plugin I want to use once I get this figured out):

HTML:

<div ng-app="myApp">
    <div ng-controller="MyCtrl">
        selectedNumber: {{selectedNumber}}
        <select ng-model="selectedNumber">
            <option ng-repeat="number in numbers" value="{{number}}">{{number}}</option>
        </select> 
        <div ng-repeat="number in numbers">
            {{number}}
        </div>
    </div>
</div>

AngularJS:

var app = angular.module('myApp', []);

app.controller('MyCtrl', function($scope) {
    $scope.numbers = [1, 2];
    $scope.selectedNumber = 2;
});

When inspect the element it looks like this:

<select ng-model="selectedNumber" class="ng-pristine ng-valid">
    <option value="? number:2 ?"></option>
            <!-- ngRepeat: number in numbers -->
    <option ng-repeat="number in numbers" value="1" class="ng-scope ng-binding">1</option>
    <option ng-repeat="number in numbers" value="2" class="ng-scope ng-binding">2</option>
</select>

I am guessing the extra "<option value="? number:2 ?"></option>" is causing this issue but I am not sure how to get rid of it. I also created a jsfiddle of this in action.

The one that I forgot to put in a code block :). I just fixed it. — testing123
– testing123, Commented Apr 25, 2013 at 13:32

Community · Accepted Answer · 2017-05-23 11:57:19Z

1

The reason you see that is because your select is bound to an item that is not contained in its options. Although you are adding options via a ng-repeat I suspect that the directive won't work and is not designed to work this way:

Here is a reference for why that extra value is coming up. AngularJS - extra blank option added using ng-repeat in select tag

I think you have two options: 1. Write your own directive 2. Use the built in ng-options and try to make it work with your plugin

Here is a reference: https://github.com/angular/angular.js/issues/639 and a fiddle from that issue: http://jsfiddle.net/GTynf/3/

Those will probably point you in the right direction for a solution.

edited May 23, 2017 at 11:57

CommunityBot

11 silver badge

answered Apr 25, 2013 at 13:47

lucuma

18.3k4 gold badges68 silver badges95 bronze badges

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

Collectives™ on Stack Overflow

AngularJS select directive not working with option

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related