Blog Post

Angular ngSelect default value does not work - type issue

Thursday, May 5, 2016 1:01 AM

I have worked on code for options select and my default value did not bind when passing value using typescript. 

 

The html code

 <select ng-model="colorId" ng-options="color.id as color.name for color in colors">
   <option value="">Select A Color</option>
 </select>

 

Angular code does not work

 colorId = '1';

colors
= [ {name:'Red', id: 1}, {name:'Orange', id:2} ];

Now this will not work due to type mismatch.

 

Angular code that will work is:

 colorId = 1; // note the missing  ' 

colors
= [ {name:'Red', id: 1}, {name:'Orange', id:2} ];



Now when update our code and rerun the code  the issue goes away.

Why?

The issue is if you pass string and your value is number they do not match.

 

What do to next?

Next time your binding does not work check the type first using:

<pre>{{(colorId===colors[0].id)}}</pre>

 

Blog
Products
Error pages
Links and tools