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

问：

目标：使默认值在下拉列表打开时始终显示在下拉列表的顶部。<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”

我们想要的是让可见列表读成这样：“文本”“苹果”“香蕉”等。

javascript angularjs angularjs-ng-options

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 - 在动态选择下拉列表的顶部显示默认选项？

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

评论

评论