AngularJS - 在动态选择下拉列表的顶部显示默认选项？

Question

目标：使默认<option> 在打开时始终显示在<select> 下拉列表的顶部。

我的目标已经完成了一半。我们有一个下拉列表，根据是否选择了其他元素来填充，并且“文本”选项正确显示为默认值。我添加了orderBy:，它按照label 的字母顺序对列表进行排序，这是我们想要的第一个修复。但我们也希望“文本”选项在打开下拉列表时始终显示在列表顶部。

此下拉列表的 HTML：

<select ng-options="t.id as t.label for t in currentOptions | orderBy:'label'" 
ng-model="rule.field" 
ng-change="updateOptions(rule, $index, true)" 
ng-init="updateOptions(rule, $index)" title="{{rule.label}}" 
class="form-control" style="width:100%" required></select>

currentOptions 数组类似这样：

currentOptions{"Text", "Banana", "Apple", "Notebook", "Coffee", "Zebra"}

当它首次出现在浏览器视图中时，它会在可点击字段中显示文本，因为它位于数组中的 [0] 位置。当我打开下拉菜单时，可见列表如下所示：“Apple”“Banana”“Coffee”“Notebook”“Text”“Zebra”

我们想要的是让可见列表如下所示：“Text”“Apple”“Banana”等。

Answer 1

您可以创建自定义函数以根据所需逻辑更新orderBy 选项。自定义函数updateOptionOrder 只是检查当前选项标签值是否为Text。如果是，那么我们只是跳过排序并将当前选项保留在顶部，否则继续基于label 值的默认排序。

演示：

var app = angular.module('myApp', []);
app.controller('AppCtrl', function($scope) {
  $scope.currentOptions = [
      {label:'Text', id:'1'},
      {label:'Banana', id:'2'},
      {label:'Apple', id:'3'},
      {label:'Notebook', id:'4'},
      {label:'Coffee', id:'5'}, {label:'Zebra', id:'6'}
    ];
    
  $scope.updateOptionOrder = function(v) {
    if(v.label == "Text"){
       return -1; // Skip this sort for "Text"
    }else{
       return v.label; // Continue sorting based on label
    }
  } 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="AppCtrl">
    <select ng-options="t.id as t.label for t in currentOptions | orderBy:updateOptionOrder" class="form-control" style="width:50%" ng-model="field"></select>
    <hr>
    <p>{{field}}</p>
  </div>
</div>