Guys after I used the angular directive ng-options I got this result
<select name="users" id="users" ng-options="user.id as user.name for user in users" ng-model="user">
<option value="number:1" label="Developers">Ahmed</option>
<option value="number:2" label="Designers">Jon</option>
<option value="number:3" label="HR">Astm</option>
<option value="number:4" label="Doctor">Fady</option>
</select>
<select name="colors" id="colors" ng-options="color.code as color.name for color in colors" ng-model="color">
<option value="string:ff0000" label="Developers">Red</option>
<option value="string:ffffff" label="Designers">White</option>
<option value="string:000000" label="HR">Black</option>
</select>
why the option value contains the data type such as number:1 or string:ffffff ??
how I can remove the data type from it and keeping only the value ?
The ng-value directive sets the value attribute of a input element, or a select element.
ng-repeat creates a new scope for each iteration so will not perform as well as ng-options. For small lists, it will not matter, but larger lists should use ng-options. Apart from that, It provides lot of flexibility in specifying iterator and offers performance benefits over ng-repeat.
Use ng-init to set default value for ng-options . Save this answer.
AngularJS ng-options Directive The ng-options directive fills a <select> element with <options>. The ng-options directive uses an array to fill the dropdown list. In many cases it would be easier to use the ng-repeat directive, but you have more flexibility when using the ng-options directive.
Add track by [id]
at the end of ng-options
.
In your case it would be:
ng-options="user.id as user.name for user in users track by user.id"
and
ng-options="color.code as color.name for color in colors track by color.code"
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With