set value for dropdown by object (not by index!)

[Dmitry]

Hi

In the select example in documentation we are able to set default value by index, something like $scope.myselect = data[0],

but what if I need to set value into dropdown as object, something like  $scope.myselect = {'value':aa, 'label':bb}, and I know that this object is present inside data?

Looks like this is impossible, because there are no link to the parent object, am I right?

Could someone look on this jsfidle example, and tell me if my idea is correct: http://jsfiddle.net/dmitrysh/S58HL/, and maybe you know how to workaround this.
For now I have to loop by entire data array and find proper object inside data, and then set it to model, this is look ugly.


Second question:
is there any way to restore data inside dropdown if object is used? for example if you load form from DB? This works perfectly for textboxes but not for the dropdowns

[Vinay Gunnam]

This is not an exact answer to the question posted.

The other way to set a value to a dropdown by not using an index is to bind the "values" of the dropdown to a unique property of the object type instead of the object itself. By this way, you can avoid the looping process to set the selected value of the dropdown.

Check this fiddle: http://jsfiddle.net/S58HL/38/

[Pawel Kozlowski]

Vinay,

Your method works fine if you change the binding in the way that a
primitive value is bound (instead of an object).
This works OK but my understanding was that Dmitry was after binding
objects. In this case we can probably only use "ugly workaround" and
iterate over all the objects.

Need to look into select's / ng-option source code...

Cheers,
Pawel

> --
> You received this message because you are subscribed to the Google Groups
> "AngularJS" group.
> To post to this group, send email to ang...@googlegroups.com.
> To unsubscribe from this group, send email to
> angular+u...@googlegroups.com.
> Visit this group at http://groups.google.com/group/angular?hl=en.
>
>



--
Question? Send a fiddle
(http://jsfiddle.net/pkozlowski_opensource/Q2NpJ/) or a plunk
(http://plnkr.co/)
Need help with jsFiddle? Check this:
http://pkozlowskios.wordpress.com/2012/08/12/using-jsfiddle-with-angularjs/

Looking for UI widget library for AngularJS? Here you go:
http://angular-ui.github.com/

[Dmitry]

Thank you Vinay and Pawel

Viany I manage to make your example work, but this is not exactly what I need. I think I can use it for now, but, as you said this is not 100% solution

Pawel - yes, in my case when I select something in dropdown I get an object, so I would like to set dropdown value when I set this object to variable,

in the angular js you have check for something like this
selected = modelValue === valueFn(scope, locals);

so looks like valueFn() return something note equal to modelValue.

[Andy Joslin]

Hi Dmitry,

The problem is angular source uses ===, which does not check for equal values, but instead equal memory reference.

$scope.stuff = [ {a:1}, {b:2} ];

$scope.bob = {a:1};

$scope.stuff[0] === $scope.bob //returns false because $scope.bob is actually different memory reference

$scope.stuff[0] == $scope.bob //returns true because $scope.bob is equal to $scope.stuff in value

Angular uses === because it's a lot quicker than == (== with deep objects can be quite slow).  In cases like this it is annoying, however.  I suggest you open a pull request on the angular repo to allow an option on the select directive which will do object == equality. https://github.com/angular/angular.js/pulls

For now, you could copy/paste the directive from the source, set it to use ==, and the one you define will overwrite the one from angular :-)

[Dmitry]

Hi Andy, thank you for the answer.

I think valueFn() works in some special way, I found this function declared many times inside code..

About == VS ===

as far as I know  === operator check type, and then value, and as far as I know it faster that ==.

For example, how this work then:

a===false or a===undefined or a==='mystring'


I'm not sure if you can overload === operator in js, like you can overload some operators in C..

[Vietson Nguyen]

In your fiddle example, you set selected2 equals to an 'object' and you didn't do anything to it.  You'll need to set up a watch function to spy on the model when page load.  Hope this helps!

    $scope.$watch("selected2", function(newValue, oldValue){

        if (newValue == oldValue){

            angular.forEach($scope.friends, function(f, i){

                if (f.name == newValue.name){

                    $scope.selected2 = $scope.friends[i]

                }

            });

        }

    });