Cara memiliki opsi default di kotak pilih Angular.js

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>

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>

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>

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.

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

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

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.

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

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>

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>

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.

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

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>

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

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>

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>

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
  }
});

Ini bekerja untuk saya

ng-selected="true" 

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.

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 .

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>

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

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"

Saya pikir cara termudah adalah

 ng-selected="$first"