Setting select value through data binding

[José Rodolfo Freitas]

Hello Guys,

I'm watching a weird behaviour with angular data binding.

I have the something like the following html code.

<select ng-model="object.attribute">
<option value="value1">Value 1</option>
<option value="value2">Value 2</option>
</select>

When, in my controller, I set $scope.object.attribute = "value1", instead of setting the select value with "value1" it creates a new option:

<option value="? string:value1 ?"></option>

Does anyone know why is that happening?


p.s.: I made a simple example on jsfidle but then it worked as expected. I mean, it didn't give me the problematic behaviour.

[José Rodolfo Freitas]

I just found out what might be the problem
instead of static option tags I have a ng-repeat:

<option value="{{value}}" ng-repeat="value in values">{{value}}</option>

Now I have a fiddle where I can share my problem:

please take a look:
http://jsfiddle.net/joserodolfofreitas/ZHwW3/4/

[Marcin Wosinek]

Take a look on this:
http://docs.angularjs.org/api/ng.directive:select

I've experienced weird behaviour of selects in angular, and as I
understand this is the angular way of dealing with selects:

<select ng-model="<variable>" ng-options="values">
</select>

and all options will be generated and understood by angular

2013/2/16 José Rodolfo Freitas <joserodol...@gmail.com>:

> --
> You received this message because you are subscribed to the Google Groups
> "AngularJS" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to angular+u...@googlegroups.com.
> To post to this group, send email to ang...@googlegroups.com.
> Visit this group at http://groups.google.com/group/angular?hl=en-US.
> For more options, visit https://groups.google.com/groups/opt_out.
>
>

[José Rodolfo Freitas]

Thanks Marcin, using ngOptions really worked!
However, I wanted to have two default options, not only one as ngOption documentation suggests.
something like:
<option value="">Default option</option>
<option ng-repeat>value in values</option>
<option>create new value</option> (in case the required value was not found on collection).


Any workaround for that?

[Clint Checketts]

Here is a jsFiddle where the select's values are built from a function: http://jsfiddle.net/ZHwW3/6/

I used underscore.js for the array 'contains' function, but otherwise its pretty simple.

HTML:

<select ng-model="selected" ng-options="v for v in valsWithSelected()">

Controller:

$scope.valsWithSelected = function(){

        var newArray = [];

        

        if(_.contains($scope.values,$scope.selected)){

            return $scope.values;

        } else {

            newArray = $scope.values.slice(0);

            newArray.push($scope.selected);   

             return newArray;

        }

    }