CODEWITHSUNDEEP
javascriptjsonangularjshtml
sandy suresh 88
sandy suresh 88

Reputation: 23

Defaultly show the placeholder in last position in select drop down in angularjs

If am passing the json data and display it in dropdown its work fine by using angularjs and html5. But when am get the data from the services and display in select drop down. The placeholder is listed down in the last position with black color and other datas from the services on the top of place holder. Then the first data is in greyed color. Can you please help me regarding this issue.

json data:

{
   key: "filterAssignedWorkGroupName",
   type: "select",
   label: "workgroup"
   placeholder: "select the workgroupname",
   option: []
}

in angularjs am using 

 <option ng-if="option.placeholder" value=""
         selected>{{option.placeholder}}</option>

Upvotes: 1

Views: 495

Answers (1)

New Dev
New Dev

Reputation: 49590

The issue here is with ng-if - ng-if causes Angular to add/remove the element from the DOM, and so (my guess) the <option> element is added last when the data driving ng-if comes from an asynchronous operation.

The solution is to use ng-show instead of ng-if:

<select ng-model="selectedOption" 
        ng-options="option for option in option.option">
   <option ng-show="option.placeholder" value="">{{option.placeholder}}</option>
</select>

Here's a plunker that illustrates the differences

Upvotes: 1

Related Questions