Empty Option field in Select tag - Angular js

Question

I am getting empty Option field in select tag.

My code is shown below:

openSelectBoxModel="47"
openSelectList=[{id:""47",name:"text"}];
valuekey="id";
titlekey="name";

<select id="reportOpenSelectBoxSingle" size="6" ng-style='selectStyle' class="openSelectBox" ng-model="openSelectBoxModel" ng-change="changeFn()" >
<option ng-selected="openSelectBoxModel===item[valueKey]" ng-repeat="item in openSelectList" id="" ng-value="{{item[valueKey]}}" ng-title="{{item[titleKey]}}" ng-bind="item[titleKey]"></option>
</select>

Please help me to solve this problem.

getting<option value="? string:47 ?"></option><option value="47">text</option> — Nishan shetty
– Nishan shetty, Commented Apr 29, 2015 at 10:16

Deblaton Jean-Philippe · Accepted Answer · 2015-04-29 10:57:56Z

1

You should not use ng-selected with ng-model.

The thing to do is to bind the selected item to your ng-model before displaying it.

//Also, instead of ng-repeat, you should use ng-option
As far as performance is regarded : ng-options does not create child scopes for every iteration. When angular performs its digest, your ng-repeat will slow it. If you have a list with hundreds of elements, you will feel a difference.

<select id="reportOpenSelectBoxSingle" 
        size="6" 
        ng-style='selectStyle' 
        class="openSelectBox" 
        ng-model="openSelectBoxModel" 
        ng-change="changeFn()" >
     <option ng-repeat="item in openSelectList" 
             value="{{item[valueKey]}}" 
             title="{{item[titleKey]}}" 
             ng-bind="item[titleKey]">
     </option>
</select>

Furthermore, you need to declare your variables inside a controller :

$scope.openSelectBoxModel="47";
$scope.openSelectList=[{id:"47",name:"text"}];
$scope.valuekey="id";
$scope.titlekey="name";

edited Apr 29, 2015 at 10:57

answered Apr 29, 2015 at 10:16

Deblaton Jean-Philippe

11.4k4 gold badges53 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nishan shetty Over a year ago

if i use ng-option i cannot use title attribute.

Deblaton Jean-Philippe Over a year ago

I addded a small explanation about ng-repeat vs ng-options.

Collectives™ on Stack Overflow

Empty Option field in Select tag - Angular js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related