Angular.js seçim kutusunda varsayılan bir seçeneğe sahip olma

Google'da arama yaptım ve bu konuda hiçbir şey bulamıyorum.

Bu kod var.

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

Bunun gibi bazı verilerle

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

Ve çıktı böyle bir şey.

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

Verilerdeki ilk seçeneği varsayılan değer olarak ayarlamak nasıl mümkün olur, böylece böyle bir sonuç elde edersiniz.

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

Ng-init'i böyle kullanabilirsiniz

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

$scope.somethingHereGörünümünüz başlatıldığında değerinizin üzerine yazılmadığından emin olmak istiyorsanız somethingHere = somethingHere || options[0].value, ng-init'inizdeki değeri şu şekilde birleştirmek ( ) istersiniz:

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

Bunu dene:

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

Burada dalgıç .

Modele bağlanacak değeri gerçekten ayarlamak istiyorsanız, ng-optionsözelliği

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

ve Javascript

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

Başka Plunker burada yukarıda dikkate.

Sadece bir Srivathsa Harish Venkataramana tarafından cevap söz track bygerçekten bunun için bir çözüm olan!

İşte nasıl kullanılacağına ilişkin Plunker (aşağıdaki linke) ile birlikte bir örnektir track byiçinde seçme 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>

Eğer selectedCityaçılı kapsamına tanımlanır ve vardır idherhangi bir değeri aynı olan özellik id, herhangi bir cityilgili citiesliste, bu yük seçilen otomatik olacak.

İşte bunun için Plunker: http://plnkr.co/edit/1EVs7R20pCffewrG0EmI?p=preview

Daha fazla ayrıntı için kaynak belgelere bakın: https://code.angularjs.org/1.3.15/docs/api/ng/directive/select

Bence, 'track by' eklendikten sonra, istediğiniz gibi almak için ng-options'da kullanabilirsiniz.

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

Bu şekilde yapmak daha iyidir, çünkü dize listesini nesne listesiyle değiştirmek istediğinizde bunu sadece

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

Elbette burada name ve id özelliklerine sahip bir nesne. Lütfen 'as' ifadesinin ng seçeneklerini ifade etmek için kullanılmadığından, yalnızca değeri ayarlayacağından ve izleme yöntemini kullanırken değiştiremeyeceğinize dikkat edin.

Kabul edilen cevap kullanılır ng-init, ancak belge mümkünse ng-init'ten kaçınacağını söyler.

NgInit'in tek uygun kullanımı, aşağıdaki demoda görüldüğü gibi ngRepeat'in özel özelliklerini yumuşatmaktır. Bu durumda, kapsamdaki değerleri başlatmak için ngInit yerine denetleyiciler kullanmalısınız.

Seçenekleriniz için ng-repeat yerine de kullanabilirsiniz ng-options. İle ng-repeatkullanabileceğiniz ng-selectedile ng-repeatözel özellikleri. yani $ endeksi, $ tek, $ bile herhangi bir kodlama olmadan bu iş yapmak için.

$first ng-tekrar özel özelliklerinden biridir.

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

---------------------- DÜZENLEME ----------------
Her ne kadar bu işe yarar, @ mik-t's tercih ederim Eğer değer seçmek için bildikleri zaman, cevap https://stackoverflow.com/a/29564802/454252 hangi kullanımları track-byve ng-optionskullanmadan ng-initveya ng-repeat.

Bu cevap yalnızca hangi değeri seçeceğinizi bilmeden ilk öğeyi seçmeniz gerektiğinde kullanılmalıdır. Örneğin, İLK öğeyi her zaman seçmenizi gerektiren otomatik tamamlama için kullanıyorum.

Benim çözüm benim varsayılan seçeneği sabit kodlamak için html kullanmak oldu. Şöyle ki:

HAML'de:

%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

HTML'de:

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

Varsayılan seçeneğimin API'mdeki tüm değerleri döndürmesini istiyorum, bu yüzden boş bir değere sahibim. Benim hamlimi de affedin. Bunun OP'nin sorusuna doğrudan bir cevap olmadığını biliyorum, ancak insanlar bunu Google'da buluyor. Umarım bu başka birine yardımcı olur.

Modelinizden seçilen seçeneği doldurmak için aşağıdaki kodu kullanın.

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

Kaç seçeneğiniz olduğuna bağlı olarak, değerlerinizi bir diziye koyabilir ve seçeneklerinizi bu şekilde otomatik olarak doldurabilirsiniz

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

Benim durumumda, ben sadece bir seçenek seçmek için kullanıcıya söylemek için bir başlangıç ​​değeri eklemek gerekiyordu, bu yüzden, aşağıdaki kodu gibi:

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

Boş bir dizenin (null)! = Değeri olan bir seçeneği denediğimde, seçenek açısal ile değiştirildi, ancak, böyle bir seçenek konduğunda (null değeri ile), bu seçenekle seçim apear.

Kötü ingilizcem için üzgünüm ve umarım bu konuda bir şeylere yardım ederim.

Kullanımı selectile ngOptionsve varsayılan değer oluşturmaya:

Daha fazla kullanım örneği için ngOptions belgelerine bakın ngOptions.

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

SELECTAçısal veri bağlama özelliğine sahipHTMLöğesihakkında resmi belgeler .

Bağlanma selectile olmayan bir dize değerine ngModel/ ayrıştırma biçimlendirme:

(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

Diğer örnek:

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

Bu benim için çalıştı.

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

Benim durumumda varsayılan formdan duruma göre değişir. Seçim etiketine özel bir özellik ekliyorum.

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

direktiflerde değeri kontrol eden bir komut dosyası oluşturdum ve açısal değeri doldurduğunda o değere sahip seçeneği seçili olarak ayarlar.

 .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()

})

sadece bu koffescript anında en azından delik şey değilse onun jist doğru tercüme.

Bu en basit yol değil ama değer değiştiğinde bunu yap

Cevap olarak , Ben Lesh cevabı , bu hat olmalıdır

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

onun yerine

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

Yani,

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

Sadece ng-selected="true"aşağıdaki gibi kullanın :

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

Modeli kontrolörde ayarlardým. Ardından seçim varsayılan olarak bu değere ayarlanır. Örn: html:

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

Açısal denetleyici (kaynak kullanarak):

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

Bu benim için çalışıyor

ng-selected="true" 

ng-optionsOluşturmak için kullanıyorsanız option, ng-modal ile aynı değere sahip olandan daha fazla açılır seçeneğiniz varsayılan olarak seçilidir. Örneği düşünün:

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

Bu nedenle list.keyve ile aynı değere sahip seçenek selectedItemvarsayılan olarak seçilidir.

Seçilemez olması için varsayılan “Lütfen Seç” seçeneğine ihtiyacım vardı. Ayrıca, varsayılan olarak seçilen bir seçeneği koşullu olarak ayarlayabilmem gerekiyordu.

Bunu aşağıdaki basit şekilde başardım: JS kodu: // Seçili varsayılanı test etmek veya varsayılan “Lütfen Seç” ile varsayılanı test etmek için bu 2'yi çevirin text //$scope.defaultOption = 0; $ scope.defaultOption = {anahtar: '3', değer: 'Seçenek 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>         

Umarım bu benzer gereksinimleri olan başka birine yardımcı olur.

"Lütfen Seçiniz" Joffrey Outtier'ın buradaki cevabı ile gerçekleştirildi .

Tarih bölümünü başlatmak yerine bir şeyiniz varsa, ng-init()denetleyicinizde bildirerek kullanabilir ve HTML'nizin üst kısmında kullanabilirsiniz. Bu işlev denetleyiciniz için bir yapıcı gibi çalışır ve değişkenlerinizi burada başlatabilirsiniz.

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>

bunu açısal kumandanızda deneyin ...

$ somethingHere = {name: 'Harika Bir Şey'};

Bir değer ayarlayabilirsiniz, ancak karmaşık bir tür kullanıyorsunuz ve açısal görünümünüzde ayarlamak için anahtar / değer arayacaktır.

Ve işe yaramazsa şunu deneyin: ng-options = "option.name seçeneklerindeki seçenek için seçenek.adi olarak seçenek.adı"

Bence en kolay yol

 ng-selected="$first"