Sasaran: Membuat default <option> selalu muncul di bagian atas tarik-turun <select> saat dibuka.

Saya sudah setengah jalan menuju tujuan saya. Kami memiliki dropdown yang terisi tergantung pada apakah elemen lain dipilih, dan opsi 'Teks' muncul dengan benar sebagai default. Saya telah menambahkan orderBy: yang mengurutkan daftar menurut abjad label, yang merupakan perbaikan pertama yang kami inginkan. Tetapi kami juga ingin opsi 'Teks' selalu muncul di bagian atas daftar saat dropdown dibuka.

HTML untuk tarik-turun ini:

<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>

Array currentOptions mirip dengan ini:

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

Saat pertama kali muncul di tampilan browser, ini menunjukkan Teks di bidang yang dapat diklik, karena berada di posisi [0] dalam larik. Ketika saya membuka dropdown, daftar yang terlihat berbunyi seperti ini: "Apple" "Banana" "Coffee" "Notebook" "Text" "Zebra"

Yang kami inginkan adalah agar daftar yang terlihat terbaca seperti ini: "Teks" "Apple" "Banana" dll.

0
Leland 17 April 2020, 21:26

1 menjawab

Jawaban Terbaik

Anda dapat membuat fungsi khusus untuk memperbarui opsi orderBy berdasarkan logika yang diperlukan. Fungsi kustom updateOptionOrder cukup periksa apakah nilai label opsi saat ini adalah Text atau tidak. Jika ya, maka kita lewati pengurutan dan menyimpan opsi saat ini di atas, jika tidak, lanjutkan pengurutan default berdasarkan nilai label.

Demo:

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>
0
palaѕн 17 April 2020, 18:42