CODEWITHSUNDEEP
angularjs
Nishan shetty
Nishan shetty

Reputation: 189

Empty Option field in Select tag - Angular js

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.

Upvotes: 3

Views: 108

Answers (1)

Deblaton Jean-Philippe
Deblaton Jean-Philippe

Reputation: 11398

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";

Upvotes: 1

Related Questions