Cara memiliki opsi default di kotak pilih Angular.js


311

Saya telah mencari Google dan tidak dapat menemukan apa-apa tentang ini.

Saya punya kode ini.

<select ng-model="somethingHere" 
        ng-options="option.value as option.name for option in options"
></select>

Dengan beberapa data seperti ini

options = [{
   name: 'Something Cool',
   value: 'something-cool-value'
}, {
   name: 'Something Else',
   value: 'something-else-value'
}];

Dan hasilnya adalah seperti ini.

<select ng-model="somethingHere"  
        ng-options="option.value as option.name for option in options" 
        class="ng-pristine ng-valid">

    <option value="?" selected="selected"></option>
    <option value="0">Something Cool</option>
    <option value="1">Something Else</option>
</select>

Bagaimana mungkin untuk menetapkan opsi pertama dalam data sebagai nilai default sehingga Anda akan mendapatkan hasil seperti ini.

<select ng-model="somethingHere" ....>
    <option value="0" selected="selected">Something Cool</option>
    <option value="1">Something Else</option>
</select>

3
Alangkah baiknya jika ada jawaban yang tidak berasumsi bahwa sudut digunakan untuk membangun opsi. Bagaimana jika opsi sudah menjadi bagian dari markup?
pspahn

1
@pspahn - menurut docs.angularjs.org/api/ng/directive/ngOptions : only a **single** hard-coded <option> element ... can be nested into the <select> element.Opsi tidak dapat menjadi bagian dari markup.
The DIMM Reaper

1
@ pspahn yang tidak akan menjawab OP, tetapi pertanyaan yang sangat berbeda ...
Mario Trucco

Jawaban:


366

Anda cukup menggunakan ng-init seperti ini

<select ng-init="somethingHere = options[0]" 
        ng-model="somethingHere" 
        ng-options="option.name for option in options">
</select>

20
Saya punya masalah dengan pekerjaan ini, itu karena saya menggunakan 'track by', menghapusnya memperbaiki masalah, kalau-kalau ada yang membantu seseorang di telepon: D
DrCord

61
Tidak ada yang salah dengan jawaban ini, tetapi ng-init gagal untuk saya dalam kasus khusus saya. Masalahnya adalah bahwa nilai yang saya gunakan belum tersedia pada saat ng-init berjalan: Saya mendapat nilai melalui panggilan ajax dan pada saat itu ng-init sudah selesai. Pada akhirnya saya menggunakan pengamat pada nilai itu dan dalam fungsi itu saya melakukan hal yang sama seperti yang saya lakukan di ng-init. Itu berhasil.
maurits

2
Saya juga memiliki masalah dalam menyelesaikan masalah ini, komentar @ maurits membawa saya ke stackoverflow.com/questions/22348886 Selamat menikmati!
Michael

5
Dokumentasi Angular mengatakan untuk lebih baik menggunakan lingkup $ controller untuk menginisialisasi nilai-nilai semacam ini docs.angularjs.org/api/ng/directive/ngInit
Fortuna

3
peringatan: menggunakan ng-init untuk tujuan ini dapat menyebabkan panggilan berlebihan ke metode $ digest (), yang dapat menyebabkan output konsol Anda terlihat merah dan jelek dengan pesan-pesan seperti "10 $ digest () iterasi tercapai. Batalkan!"
DMac the Destroyer

235

Jika Anda ingin memastikan $scope.somethingHerenilai Anda tidak ditimpa ketika tampilan Anda diinisialisasi, Anda ingin menyatukan ( somethingHere = somethingHere || options[0].value) nilai dalam ng-init Anda seperti:

<select ng-model="somethingHere" 
        ng-init="somethingHere = somethingHere || options[0].value"
        ng-options="option.value as option.name for option in options">
</select>

22
Solusi ini bekerja dengan baik dan lebih baik daripada jawaban yang dipilih.
MJ

tidakkah tampilan ng-init seperti ini ng-init = "somethingHere = somethingHere || options [0]" ??
infinitloop

1
Bagaimana cara mengatasi optionskekosongan? Seperti dalam hal optionsdata berasal dari sumber eksternal.
null

1
@suud Anda hanya perlu memeriksa opsi && options.length> 0 di ng-init Anda. Sungguh, sebagian besar ini harus dilakukan di controller Anda, jadi itu bisa diuji.
Ben Lesh

@ BenLesh Jika saya ingin menulis beberapa teks (string) bukan opsi pertama. ng-init="somethingHere= somethingHere || 'Select one' " Saya mencoba seperti ini. tapi itu tidak berhasil. apa yang salah dalam kode saya
codelearner

69

Coba ini:

HTML

<select 
    ng-model="selectedOption" 
    ng-options="option.name for option in options">
</select>

Javascript

function Ctrl($scope) {
    $scope.options = [
        {
          name: 'Something Cool',
          value: 'something-cool-value'
        }, 
        {
          name: 'Something Else',
          value: 'something-else-value'
        }
    ];

    $scope.selectedOption = $scope.options[0];
}

Plunker di sini .

Jika Anda benar-benar ingin mengatur nilai yang akan terikat pada model, maka ubah ng-optionsatribut menjadi

ng-options="option.value as option.name for option in options"

dan Javascript ke

...
$scope.selectedOption = $scope.options[0].value;

Plunker lain di sini mempertimbangkan hal di atas.


2
Masalahnya adalah saya harus melakukan ini untuk banyak kotak pilih.
iConnor

Tidak mengerti Apa yang harus kamu lakukan?
Michael Benford

Saya harus melakukannya secara manual untuk sekitar 50+ kotak pilih
iConnor

Maksud Anda menetapkan nilai default untuk setiap kotak pilih? Jika demikian, saya rasa itu tidak jelas dalam pertanyaan Anda. Ngomong-ngomong, apakah saya benar berasumsi bahwa Anda harus memuat item ke setiap kotak pilih? Jika demikian saya tidak berpikir menginisialisasi nilai default mereka akan menjadi masalah besar.
Michael Benford

1
Masalah saya adalah bahwa indeks opsi dikembalikan dari "kirim" pada formulir. Yang saya butuhkan adalah apa yang Anda panggil option.name, yang merupakan apa yang dikembalikan dari bentuk rel tua yang sederhana. Kotak centang dan tombol radio berfungsi dengan baik karena Anda menggunakan ng-repeat untuk mendapatkan markup yang benar. Bagaimana cara saya mendapatkan option.name dikembalikan pada waktu pengiriman formulir?
pferrel

40

Hanya satu jawaban oleh Srivathsa Harish Venkataramana yang menyebutkan track byyang memang solusi untuk ini!

Berikut ini adalah contoh bersama dengan Plunker (tautan di bawah) tentang cara menggunakan track bydi pilih ng-options :

<select ng-model="selectedCity"
        ng-options="city as city.name for city in cities track by city.id">
  <option value="">-- Select City --</option>
</select>

Jika selectedCitydidefinisikan pada ruang lingkup sudut, dan memiliki idproperti dengan nilai yang sama dengan yang idada citydi citiesdaftar, maka akan dipilih secara otomatis saat memuat.

Inilah Plunker untuk ini: http://plnkr.co/edit/1EVs7R20pCffewrG0EmI?p=preview

Lihat dokumentasi sumber untuk detail lebih lanjut: https://code.angularjs.org/1.3.15/docs/api/ng/directive/select


1
Terima kasih itu membantu saya;)
Brahim LAMJAGUAR

1
Luar biasa! Terima kasih!
Iurii Golskyi

33

Saya pikir, setelah dimasukkannya 'track by', Anda dapat menggunakannya dalam opsi-ng untuk mendapatkan apa yang Anda inginkan, seperti yang berikut ini

 <select ng-model="somethingHere" ng-options="option.name for option in options track by option.value" ></select>

Cara melakukannya lebih baik karena ketika Anda ingin mengganti daftar string dengan daftar objek, Anda hanya akan mengubahnya

 <select ng-model="somethingHere" ng-options="object.name for option in options track by object.id" ></select>

di mana somethingHere adalah objek dengan nama properti dan id, tentu saja. Harap dicatat, 'as' tidak digunakan dengan cara ini untuk mengekspresikan opsi-ng, karena itu hanya akan menetapkan nilai dan Anda tidak akan dapat mengubahnya ketika Anda menggunakan trek dengan


Inilah yang bekerja untuk saya. Saya pikir sudut membutuhkan sesuatu untuk mengidentifikasi objek dalam model lingkup saya sebagai setara dengan pilihan daftar referensi. "lacak oleh guarantor.code" berhasil!
markbaldy

22

Jawaban yang diterima digunakan ng-init, tetapi dokumen mengatakan untuk menghindari ng-init jika memungkinkan.

Satu-satunya penggunaan ngInit yang tepat adalah untuk aliasing properti khusus dari ngRepeat, seperti yang terlihat di demo di bawah ini. Selain kasus ini, Anda harus menggunakan pengontrol daripada ngInit untuk menginisialisasi nilai pada lingkup.

Anda juga dapat menggunakan ng-repeat sebagai ganti ng-optionsuntuk opsi Anda. Dengan ng-repeat, Anda bisa menggunakannya ng-selectedbersamang-repeat properti khusus. yaitu $ index, $ odd, $ even untuk membuat pekerjaan ini tanpa coding.

$first adalah salah satu sifat khusus ng-repeat.

  <select ng-model="foo">
    <option ng-selected="$first" ng-repeat="(id,value) in myOptions" value="{{id}}">
      {{value}}
    </option>
  </select>

---------------------- EDIT ----------------
Meskipun ini berfungsi, saya lebih suka @ mik-t jawab ketika Anda tahu nilai apa yang harus dipilih, https://stackoverflow.com/a/29564802/454252 , yang menggunakan track-bydan ng-optionstanpa menggunakan ng-initatau ng-repeat.

Jawaban ini hanya boleh digunakan ketika Anda harus memilih item pertama tanpa mengetahui nilai apa yang harus dipilih. misalnya, saya menggunakan ini untuk penyelesaian otomatis yang mengharuskan untuk memilih item PERTAMA setiap saat.


5
Ini berfungsi tetapi tidak boleh digunakan karena ng-optionslebih cepat dan lebih dioptimalkan daripada ng-repeat.
Iso

@Apakah Anda tidak setuju dengan Anda, tetapi apakah Anda memiliki sumber untuk informasi itu?
Adam Plocher

1
Tepat di sini di dokumen: docs.angularjs.org/api/ng/directive/ngOptions “lebih banyak fleksibilitas dalam bagaimana <select>model ditugaskan melalui select asbagian dari ekspresi pemahaman”, “mengurangi konsumsi memori dengan tidak menciptakan ruang lingkup baru untuk setiap instance yang diulang "," meningkatkan kecepatan render dengan menciptakan opsi dalam documentFragmentalih - alih secara individual "
Iso

16

Solusi saya untuk ini adalah menggunakan html ke hardcode opsi default saya. Seperti itu:

Dalam HAML:

%select{'ng-model' => 'province', 'ng-options' => "province as province for province in summary.provinces", 'chosen' => "chosen-select", 'data-placeholder' => "BC & ON"}
  %option{:value => "", :selected => "selected"}
    BC &amp; ON

Dalam HTML:

<select ng-model="province" ng-options="province as province for province in summary.provinces" chosen="chosen-select" data-placeholder="BC & ON">
  <option value="" selected="selected">BC &amp; ON</option>
</select>

Saya ingin opsi default saya untuk mengembalikan semua nilai dari api saya, itu sebabnya saya memiliki nilai kosong. Maafkan juga haml saya. Saya tahu ini bukan jawaban langsung untuk pertanyaan OP, tetapi orang-orang menemukan ini di Google. Semoga ini bisa membantu orang lain.


1
Saya sudah mencoba mengonversikan ini ke html tetapi gagal di semua konverter online yang saya coba.
iConnor

5
Mengapa tidak memposting html? Maksud saya, apakah memposting kode seperti itu benar-benar diperlukan? Ini tidak seperti OP menggunakan mesin templating dalam pertanyaan.
arg20

14

Gunakan kode di bawah ini untuk mengisi opsi yang dipilih dari model Anda.

<select id="roomForListing" ng-model="selectedRoom.roomName" >

<option ng-repeat="room in roomList" title="{{room.roomName}}" ng-selected="{{room.roomName == selectedRoom.roomName}}" value="{{room.roomName}}">{{room.roomName}}</option>

</select>

Bekerja lekker untukku. Panggilan asinkron yang bertanggung jawab untuk opsi mengikat untuk daftar pilih saya sedikit lebih lambat daripada yang membawa ng-model sehingga pendekatan ini banyak membantu saya. Terima kasih Eebbesen :-)
ajaysinghdav10d

Ini juga berfungsi untuk saya. Sederhana dan mudah dimengerti.
Kent Aguilar

10

Bergantung pada berapa banyak opsi yang Anda miliki, Anda bisa meletakkan nilai-nilai Anda dalam sebuah array dan mengisi secara otomatis opsi-opsi Anda seperti ini

<select ng-model="somethingHere.values" ng-options="values for values in [5,4,3,2,1]">
   <option value="">Pick a Number</option>
</select>

10

Dalam kasus saya, saya perlu memasukkan nilai awal hanya untuk memberi tahu pengguna untuk memilih opsi, jadi, saya suka kode di bawah ini:

<select ...
    <option value="" ng-selected="selected">Select one option</option>
</select>

Ketika saya mencoba opsi dengan nilai! = Dari string kosong (nol) opsi diganti dengan sudut, tetapi, ketika menempatkan opsi seperti itu (dengan nilai nol), pilih apear dengan opsi ini.

Maaf dengan bahasa Inggris saya yang buruk dan saya harap saya membantu dalam hal ini.


8

Menggunakan selectdengan ngOptionsdan mengatur nilai default:

Lihat dokumentasi ngOptions untuk lebih banyak ngOptionscontoh penggunaan.

angular.module('defaultValueSelect', [])
 .controller('ExampleController', ['$scope', function($scope) {
   $scope.data = {
    availableOptions: [
      {id: '1', name: 'Option A'},
      {id: '2', name: 'Option B'},
      {id: '3', name: 'Option C'}
    ],
    selectedOption: {id: '2', name: 'Option B'} //This sets the default value of the select in the ui
    };
}]);
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<body ng-app="defaultValueSelect">
  <div ng-controller="ExampleController">
  <form name="myForm">
    <label for="mySelect">Make a choice:</label>
    <select name="mySelect" id="mySelect"
      ng-options="option.name for option in data.availableOptions track by option.id"
      ng-model="data.selectedOption"></select>
  </form>
  <hr>
  <tt>option = {{data.selectedOption}}</tt><br/>
</div>

plnkr.co

Dokumentasi resmi tentangSELECTelemenHTMLdengan pengikatan data sudut.

Mengikat selectke nilai non-string melalui ngModelparsing / pemformatan:

(function(angular) {
  'use strict';
angular.module('nonStringSelect', [])
  .run(function($rootScope) {
    $rootScope.model = { id: 2 };
  })
  .directive('convertToNumber', function() {
    return {
      require: 'ngModel',
      link: function(scope, element, attrs, ngModel) {
        ngModel.$parsers.push(function(val) {
          return parseInt(val, 10);
        });
        ngModel.$formatters.push(function(val) {
          return '' + val;
        });
      }
    };
  });
})(window.angular);
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.1/angular.min.js"></script>
<body ng-app="nonStringSelect">
  <select ng-model="model.id" convert-to-number>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
{{ model }}
</body>

plnkr.co

Contoh lain:

angular.module('defaultValueSelect', [])
 .controller('ExampleController', ['$scope', function($scope) {
   $scope.availableOptions = [
     { name: 'Apple', value: 'apple' }, 
     { name: 'Banana', value: 'banana' }, 
     { name: 'Kiwi', value: 'kiwi' }
   ];
   $scope.data = {selectedOption : $scope.availableOptions[1].value};
}]);
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<body ng-app="defaultValueSelect">
  <div ng-controller="ExampleController">
  <form name="myForm">
    <select ng-model="data.selectedOption" required ng-options="option.value as option.name for option in availableOptions"></select>
  </form>  
  </div>
</body>

jsfiddle


4

Ini berhasil untuk saya.

<select ng-model="somethingHere" ng-init="somethingHere='Cool'">
    <option value="Cool">Something Cool</option>
    <option value="Else">Something Else</option>
</select>

3

Dalam kasus saya sejak default bervariasi dari kasus ke kasus dalam formulir. Saya menambahkan atribut khusus di tag pilih.

 <select setSeletected="{{data.value}}">
      <option value="value1"> value1....
      <option value="value2"> value2....
       ......

dalam arahan saya membuat skrip yang memeriksa nilai dan ketika sudut mengisinya dalam menetapkan opsi dengan nilai yang dipilih.

 .directive('setSelected', function(){
    restrict: 'A',
    link: (scope, element, attrs){
     function setSel=(){
     //test if the value is defined if not try again if so run the command
       if (typeof attrs.setSelected=='undefined'){             
         window.setTimeout( function(){setSel()},300) 
       }else{
         element.find('[value="'+attrs.setSelected+'"]').prop('selected',true);          
       }
     }
    }

  setSel()

})

baru saja menerjemahkan ini dari coffescript on the fly setidaknya es itu benar jika tidak lubang.

Ini bukan cara paling sederhana tetapi menyelesaikannya ketika nilainya bervariasi


3

Menanggapi jawaban Ben Lesh , harus ada garis ini

ng-init="somethingHere = somethingHere || options[0]" 

dari pada

ng-init="somethingHere = somethingHere || options[0].value" 

Itu adalah,

<select ng-model="somethingHere"
        ng-init="somethingHere = somethingHere || options[0]"
        ng-options="option.name for option in options track by option.value">
</select>


3

Cukup gunakan ng-selected="true"sebagai berikut:

<select ng-model="myModel">
        <option value="a" ng-selected="true">A</option>
        <option value="b">B</option>
</select>

2

Saya akan mengatur model di controller. Kemudian pilih akan default ke nilai itu. Mis: html:

<select ng-options="..." ng-model="selectedItem">

Pengontrol sudut (menggunakan sumber daya):

myResource.items(function(items){
  $scope.items=items;
  if(items.length>0){
     $scope.selectedItem= items[0];
//if you want the first. Could be from config whatever
  }
});


1

Jika Anda menggunakan ng-optionsuntuk membuat Anda drop down daripada optionmemiliki nilai yang sama dengan ng-modal dipilih secara default. Perhatikan contohnya:

<select ng-options="list.key as list.name for list in lists track by list.id" ng-model="selectedItem">

Jadi opsi memiliki nilai yang sama list.keydan selectedItem, dipilih secara default.


1

Saya membutuhkan "Tolong Pilih" default untuk tidak dipilih. Saya juga harus dapat mengatur opsi yang dipilih secara kondisional.

Saya mencapai ini dengan cara sederhana berikut: Kode JS: // Balikkan 2 ini untuk menguji default yang dipilih atau tidak ada default dengan default "Silakan Pilih" teks //$scope.defaultOption = 0; $ scope.defaultOption = {key: '3', value: 'Option 3'};

$scope.options = [
   { key: '1', value: 'Option 1' },
   { key: '2', value: 'Option 2' },
   { key: '3', value: 'Option 3' },
   { key: '4', value: 'Option 4' }
];

getOptions();

function getOptions(){
    if ($scope.defaultOption != 0)
    { $scope.options.selectedOption = $scope.defaultOption; }
}

HTML:

<select name="OptionSelect" id="OptionSelect" ng-model="options.selectedOption" ng-options="item.value for item in options track by item.key">
<option value="" disabled selected style="display: none;"> -- Please Select -- </option>
</select>
<h1>You selected: {{options.selectedOption.key}}</h1>         

Saya harap ini membantu orang lain yang memiliki persyaratan serupa.

"Silakan Pilih" dicapai melalui jawaban Joffrey Outtier di sini .


0

Jika Anda memiliki sesuatu alih-alih hanya init bagian tanggal, Anda dapat menggunakannya ng-init()dengan mendeklarasikannya di controller Anda, dan menggunakannya di bagian atas HTML Anda. Fungsi ini akan berfungsi seperti konstruktor untuk pengontrol Anda, dan Anda dapat menginisialisasi variabel Anda di sana.

angular.module('myApp', [])
 .controller('myController', ['$scope', ($scope) => {
   $scope.allOptions = [
     { name: 'Apple', value: 'apple' }, 
     { name: 'Banana', value: 'banana' }
   ];
   $scope.myInit = () => {
      $scope.userSelected = 'apple'
      // Other initiations can goes here..
   }
}]);


<body ng-app="myApp">
  <div ng-controller="myController" ng-init="init()">
    <select ng-model="userSelected" ng-options="option.value as option.name for option in allOptions"></select>
   </div>
</body>

0
    <!--
    Using following solution you can set initial 
default value at controller as well as after change option selected value shown as default.
    -->
    <script type="text/javascript">
      function myCtrl($scope)
        {
          //...
            $scope.myModel=Initial Default Value; //set default value as required
          //..
        }
    </script>
    <select ng-model="myModel" 
                ng-init="myModel= myModel"
                ng-options="option.value as option.name for option in options">
        </select>

0

coba ini di pengontrol sudut Anda ...

$ somethingHere = {name: 'Something Cool'};

Anda dapat menetapkan nilai, tetapi Anda menggunakan tipe yang kompleks dan sudut akan mencari kunci / nilai untuk diatur dalam tampilan Anda.

Dan, jika tidak berhasil, coba ini: ng-options = "option.value sebagai option.name untuk opsi di track opsi dengan option.name"


Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.