Inisialisasi pilih dengan AngularJS dan ng-repeat

133

Saya mencoba untuk mendapatkan kotak-pilih untuk memulai dengan opsi yang sudah diisi menggunakan ng-repeat dengan AngularJS 1.1.5. Sebaliknya pilih selalu dimulai dengan tidak ada yang dipilih. Ini juga memiliki opsi kosong, yang tidak saya inginkan. Saya pikir ada efek samping dari tidak ada yang dipilih.

Saya bisa menjalankan ini menggunakan ng-options alih-alih ng-repeat, tapi saya ingin menggunakan ng-repeat untuk kasus ini. Meskipun contoh saya yang dipersempit tidak menunjukkannya, saya juga ingin mengatur atribut judul dari setiap opsi, dan tidak ada cara untuk melakukannya menggunakan opsi-ng, sejauh yang saya tahu.

Saya tidak berpikir ini terkait dengan lingkup AngularJs umum / masalah warisan prototipikal. Setidaknya saya tidak melihat sesuatu yang jelas ketika memeriksa di Batarang. Plus, ketika Anda memilih opsi di pilih dengan UI, model tidak memperbarui dengan benar.

Inilah HTML-nya:

<body ng-app ng-controller="AppCtrl">
    <div>
        Operator is: {{filterCondition.operator}}
    </div>
    <select ng-model="filterCondition.operator">
       <option 
           ng-repeat="operator in operators" 
           value="{{operator.value}}"
       >
           {{operator.displayName}}
       </option>
    </select>
</body>

Dan JavaScript:

function AppCtrl($scope) {

    $scope.filterCondition={
        operator: 'eq'
    }

    $scope.operators = [
        {value: 'eq', displayName: 'equals'},
        {value: 'neq', displayName: 'not equal'}
     ]
}

JS Fiddle untuk ini: http://jsfiddle.net/coverbeck/FxM3B/2/

javascript angularjs Charles O.
sumber
1
ngOption dibuat karena tidak ada cara bersih untuk melakukan ini dengan ngRepeat. ngUlangi buka gulungan setelah opsi dipilih. Sudahkah Anda mencoba mengatur ngSelect pada opsi Anda
TheSharpieOne
Iya! Dipilih yang bekerja! Saya akan memposting JsFiddle yang berfungsi diperbarui.
Charles O.
Perlu dicatat bahwa dalam AngualrJS 1.2 kode ini bekerja secara berbeda - Kode ini tidak membuat elemen <OPTION> kosong baru, namun, ia hanya dapat memilih opsi pertama di kotak daftar. Anda dapat melihatnya di sini
VitalyB

Jawaban:

226

BAIK. Jika Anda tidak ingin menggunakan cara yang benar ng-options, Anda dapat menambahkan ng-selectedatribut dengan logika pemeriksaan kondisi untuk optionarahan agar pre-select berfungsi.

<select ng-model="filterCondition.operator">
    <option ng-selected="{{operator.value == filterCondition.operator}}"
            ng-repeat="operator in operators"
            value="{{operator.value}}">
      {{operator.displayName}}
    </option>
</select>

Working Demo

zs2020
sumber
37
Saya akan memberi Anda kredit karena Anda sudah menemukannya sendiri dan melakukan contoh lengkapnya. Meskipun saya tidak setuju dengan komentar Anda tentang opsi-ng menjadi "cara yang benar." :) Saya selalu menggunakan opsi-ng sendiri, tetapi ini diperlukan untuk melakukan sesuatu yang tidak didukung opsi-ng, sekecil itu. Dan dokumen Angular mengatakan Anda bisa bersenang-senang juga. Terima kasih, Charles
Charles O.
Terima kasih, itu cara mudah untuk menonaktifkan beberapa opsi.
Dorian
11
Opsi-ng hanya benar selama penggunaannya cocok dengan Anda. Anda mungkin memerlukan atribut / kelas tambahan di kolom opsi / optgroup dll.
mystrdat
6
"jalan yang benar" kadang-kadang tidak berfungsi (mis. jika Anda ingin menerjemahkan string yang mengisi nama opsi)
btk
11
Saya pikir ekspresi yang dipilih harus tanpa {{}}: ng-selected = "operator.value == filterCondition.operator"
mvermand
35

Untuk tag pilih, angular memberikan arahan opsi-ng. Ini memberi Anda kerangka kerja spesifik untuk mengatur opsi dan menetapkan default. Ini biola yang diperbarui menggunakan opsi-ng yang berfungsi seperti yang diharapkan: http://jsfiddle.net/FxM3B/4/

HTML yang diperbarui (kode tetap sama) 

<body ng-app ng-controller="AppCtrl">
<div>Operator is: {{filterCondition.operator}}</div>
<select ng-model="filterCondition.operator" ng-options="operator.value as operator.displayName for operator in operators">
</select>
</body>
Jeremy Likness
sumber
3
Hai Jeremy - Saya mencoba melakukan ini tanpa opsi-ng. Seperti yang saya katakan di pertanyaan saya dan sebagai balasan untuk Shaun, saya ingin mengatur atribut judul pada setiap opsi, dan saya tidak bisa melakukan itu dengan opsi-ng, sejauh yang saya tahu. Terima kasih, Charles
Charles O.
9

Terima kasih kepada TheSharpieOne karena menunjukkan opsi yang dipilih. Jika itu telah diposting sebagai jawaban daripada sebagai komentar, saya akan membuat jawaban yang benar.

Inilah JSFiddle yang berfungsi: http://jsfiddle.net/coverbeck/FxM3B/5/ .

Saya juga memperbarui biola untuk menggunakan atribut judul, yang saya tinggalkan di posting asli saya, karena itu bukan penyebab masalah (tetapi itu adalah alasan saya ingin menggunakan ng-repeat daripada ng-options) .

HTML:

<body ng-app ng-controller="AppCtrl">
<div>Operator is: {{filterCondition.operator}}</div>
<select ng-model="filterCondition.operator">
   <option ng-repeat="operator in operators" title="{{operator.title}}" ng-selected="{{operator.value == filterCondition.operator}}" value="{{operator.value}}">{{operator.displayName}}</option>
</select>
</body>

JS:

function AppCtrl($scope) {

    $scope.filterCondition={
        operator: 'eq'
    }

    $scope.operators = [
        {value: 'eq', displayName: 'equals', title: 'The equals operator does blah, blah'},
        {value: 'neq', displayName: 'not equal', title: 'The not equals operator does yada yada'}
     ]
}
Charles O.
sumber
Maaf tentang pengeposan sebagai komentar. Saya tidak merasa ingin membuat contoh dan saya tidak 100% yakin itu akan berhasil. Itu hanya firasat.
TheSharpieOne
9

Fakta bahwa sudut menyuntikkan elemen opsi kosong ke pilih adalah bahwa objek model terikat padanya secara default datang dengan nilai kosong ketika diinisialisasi.

Jika Anda ingin memilih opsi default maka Anda mungkin dapat mengaturnya pada ruang lingkup di controller 

$scope.filterCondition.operator = "your value here";

Jika Anda ingin placeholder opsi kosong, ini berfungsi untuk saya

<select ng-model="filterCondition.operator" ng-options="operator.id as operator.name for operator in operators">
  <option value="">Choose Operator</option>
</select>
Ammadu
sumber
2
Ini bagus, tetapi Angular membuat opsi kosong. Bagaimana cara menghindarinya?
MarceloBarbosa
1

Seperti yang disarankan Anda perlu menggunakan opsi-ng dan sayangnya saya percaya Anda perlu referensi elemen array untuk default (kecuali array adalah array string).

http://jsfiddle.net/FxM3B/3/

JavaScript:

function AppCtrl($scope) {


    $scope.operators = [
        {value: 'eq', displayName: 'equals'},
        {value: 'neq', displayName: 'not equal'}
     ]

    $scope.filterCondition={
        operator: $scope.operators[0]
    }
}

HTML:

<body ng-app ng-controller="AppCtrl">
<div>Operator is: {{filterCondition.operator.value}}</div>
<select ng-model="filterCondition.operator" ng-options="operator.displayName for operator in operators">
</select>
</body>
shaunhusain
sumber
Apakah Anda tahu mengapa dan Anda yakin? Dokumentasi ( docs.angularjs.org/api/ng.directive:select ) mengatakan Anda hanya perlu menggunakan opsi-ng saat mengikat ke nilai non-string. Seperti yang saya katakan, saya ingin menggunakan atribut title, dan tidak ada cara untuk melakukannya dengan ng-options. Sesuatu seperti <option title = "Deskripsi yang sangat panjang tentang pilihan ini" ...> Terima kasih.
Charles O.
Saya percaya catatan dalam dokumen sedikit tidak jelas dan sebenarnya berarti Anda harus menggunakan string untuk model dan memiliki array string untuk opsi. Jika Anda tidak keberatan apa alasan untuk menggunakan atribut "title" saya tidak melihatnya di W3C w3schools.com/tags/tag_option.asp dan tidak dapat mengingat menggunakannya dengan benar. Tidak bisakah Anda hanya menyimpan deskripsi di objek kemudian masih mengambil data itu karena itulah model sekarang terikat?
shaunhusain
Pada halaman W3C yang Anda tautkan, jika Anda mengklik tautan Global Attributes, Anda akan melihat bahwa atribut title didukung oleh elemen opsi. Saya menggunakan atribut judul hanya untuk menampilkan teks "tooltip", sehingga jika Anda mengarahkan kursor ke opsi, Anda bisa mendapatkan deskripsi yang lebih besar tentang apa artinya opsi itu. Ini hal kecil, tetapi akan menyenangkan jika dimiliki, jika memungkinkan.
Charles O.
@CharlesO. Saya ingin melakukan persis seperti Anda. Tetapkan objek (nilai non-string) tetapi saya juga ingin menggunakan judul dalam daftar opsi. Apakah ada solusi untuk ini? Sepertinya saya tidak dapat menemukannya ...
Wilt
1

Jika Anda menggunakan md-pilih dan ng-ulangi md-opsi dari bahan sudut maka Anda dapat menambahkan ng-model-options="{trackBy: '$value.id'}"ke abu tag md-pilih yang ditunjukkan pada pena ini

Kode:

<md-select ng-model="user" style="min-width: 200px;" ng-model-options="{trackBy: '$value.id'}">
  <md-select-label>{{ user ? user.name : 'Assign to user' }}</md-select-label>
  <md-option ng-value="user" ng-repeat="user in users">{{user.name}}</md-option>
</md-select>
Luaskan cuplikan

Japheth Ongeri - inkalimeva
sumber