AngularJS

Question

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

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

此下拉列表的 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>

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

AngularJS - display a default option at the top of a dynamic select dropdown list?

javascript

angularjs-ng-options