默认在 angularjs 中的 select 下拉列表的最后位置显示占位符

Question

如果我传递 json 数据并在下拉列表中显示它，使用 angularjs 和 html5 可以正常工作。但是当我从服务中获取数据并显示在 select 下拉列表中时。占位符列在最后一个位置，黑色和来自占位符顶部服务的其他数据。然后第一个数据是灰色的。你能帮我解决这个问题吗？

json 数据：

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

在 angularjs 我正在使用

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

Answer 1

这里的问题是 ng-if - ng-if 导致 Angular 到 add/remove 来自 DOM 的元素，所以（我的猜测）当驱动 ng-if 的数据来自异步操作时，最后添加 <option> 元素。

解决办法是用ng-show代替ng-if:

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

这里有一个 plunker 说明了差异

默认在 angularjs 中的 select 下拉列表的最后位置显示占位符

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

html

javascript

json

angularjs