javascript - 默认在 angularjs 中的选择下拉列表中显示最后位置的占位符

Question

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

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 从 DOM 添加/删除元素，所以(我的猜测)<option>数据驱动ng-if时最后添加元素来自异步操作。

解决方案是使用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这说明了差异