默认情况下，在 angularjs 中选择下拉列表中的最后一个位置显示占位符

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

本文关键字：最后一个 位置 占位符 显示 下拉列表 选择 情况下 angularjs 默认      更新时间：2023-09-26

如果我传递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>

这里的问题在于ng-if - ng-if导致 Angular 从 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

相关文章：