select ng-model ng-options

[gkielwasser]

Hello,

Here are 2 cases which show 2 select : http://jsfiddle.net/gkielwasser/DbajP/14/

I'm misunderstanding why my default option is not selected in the case 1. In the case 2 the right option is selected.

I checked this http://docs.angularjs.org/api/angular.module.ng.$compileProvider.directive.select
but can't figure out what's wrong in my code.

thanks

[zvictor]

+1

same problem, I can't use select with $resource.

TypeError: Object [object Object] has no method 'prop'
    at [object Object].renderUnknownOption (http://localhost:86/static/scripts/angular/lib/angular.js:13923:23)
    at [object Object].$render (http://localhost:86/static/scripts/angular/lib/angular.js:13999:26)
    at Object.fn (http://localhost:86/static/scripts/angular/lib/angular.js:11721:12)
    at Object.$digest (http://localhost:86/static/scripts/angular/lib/angular.js:7661:27)
    at Object.$apply (http://localhost:86/static/scripts/angular/lib/angular.js:7855:24)
    at done (http://localhost:86/static/scripts/angular/lib/angular.js:8844:20)
    at completeRequest (http://localhost:86/static/scripts/angular/lib/angular.js:8984:7)
    at XMLHttpRequest.onreadystatechange (http://localhost:86/static/scripts/angular/lib/angular.js:8954:11) 

It is interesting to notice that, after error on init, it binds correctly.
When you select an option, it updates on controller.

[zvictor]

I guess the problem is related to ng-selected
If I try to create <option ng-selected="expression" /> with any expression, I see the error mentioned above.

[pburgmer]

+1
Same problem here.

<select ng-model="filterParams.programName" ng-options="item.programName as item.programName for item in data>
</select>

throws the error twice at initialization and twice on each user interaction but works fine.

Angular's select compares models by using comparison operator (===), therefore you should use plain objects (String, Number ...) to get this sample working.

In your case:

<select ng-model="userColor[1].user.id" ng-options="c.id as c.id for c in colors">

[pburgmer]

I think the TypeError occurs if you use an old version of jquery. The prop method was introduced with jQuery 1.6. I was using 1.4.2. Now using the newest version of jQuery, the error doesn't pop up anymore.

[JensRantil]

I think the TypeError occurs if you use an old version of jquery. The prop method was introduced with jQuery 1.6. I was using 1.4.2. Now using the newest version of jQuery, the error doesn't pop up anymore.

Confirmed-ish. I received the same TypeError. Upgrading from jQuery 1.5.1 to 1.7.2 made the error go away for me.

[JensRantil]

@zvictor Were you using jQuery on your page?

[zvictor]

Guys, thanks for the attention. Unfortunately, I can't try this now. We are doing a huge refactoring here.

[gregwebs]

newer version of jQuery fixed it for me

[pkozlowski-opensource]

@gkielwasser As others explained already the ng-select directives compares objects identity and not object values. To indicate binding correctly you would either:

• change your userColors array to point to object references from the color array: http://jsfiddle.net/MJQy5/1/. This might or might not be practical depending on your data model
• change binding as proposed by @EugeneZarya : http://jsfiddle.net/fnzxh/

@zvictor others commented on issues with jQuery. For the problems with $resource it is timing issue, $resource is not synchronous (although it looks like it is). More info here: http://stackoverflow.com/a/11966512/1418796

So, apart from the jQuery things seem to be working as intended. Closing for now, please re-open is still facing problems.