select öğesinin varsayılan değerini ayarlamak için ng-option nasıl kullanılır

Açısal seçim direktifinin belgelerini burada gördüm: http://docs.angularjs.org/api/ng.directive:select . Varsayılan değeri nasıl ayarlayacağımı anlayamıyorum. Bu kafa karıştırıyor:

dizideki değer için etiket olarak seç

İşte nesne:

{
    "type": "select", 
    "name": "Service",
    "value": "Service 3", 
    "values": [ "Service 1", "Service 2", "Service 3", "Service 4"] 
}

Html (çalışıyor):

<select><option ng-repeat="value in prop.values">{{value}}</option></select>

ve sonra prop.valuevarsayılan seçenek (çalışmıyor) olarak ayarlamak için select öğesinin içine bir ng-seçenek özniteliği eklemek çalışıyorum .

ng-options="(prop.value) for v in prop.values"

Neyi yanlış yapıyorum?

Bu nesnenin kapsamınızda olduğunu varsayarsak:

<div ng-controller="MyCtrl">
  <select ng-model="prop.value" ng-options="v for v in prop.values">
  </select>
</div>

function MyCtrl($scope) {
  $scope.prop = {
    "type": "select", 
    "name": "Service",
    "value": "Service 3", 
    "values": [ "Service 1", "Service 2", "Service 3", "Service 4"] 
  };
}

Çalışma Plunkr: http://plnkr.co/edit/wTRXZYEPrZJRizEltQ2g

Select için açısal dokümantasyon * açıkça bu soruya cevap vermez, ama orada olduğunu. Eğer bakarsanız, şunu script.jsgöreceksiniz:

function MyCntrl($scope) {
  $scope.colors = [
    {name:'black', shade:'dark'},
    {name:'white', shade:'light'},
    {name:'red', shade:'dark'},
    {name:'blue', shade:'dark'},
    {name:'yellow', shade:'light'}
  ];
  $scope.color = $scope.colors[2]; // Default the color to red
}

Bu html:

<select ng-model="color" ng-options="c.name for c in colors"></select>

Bu, bir <select>ile seçilen değeri varsayılan olarak ayarlamanın daha açık bir yolu gibi görünüyor ng-options. Ayrıca farklı etiket / değerleriniz varsa işe yarayacaktır.

* Bu Açısal 1.2.7'den

Bu yanıt, bir DB'den veri getirdiğinizde, değişiklik yaptığınızda ve değişiklikleri devam ettirdiğinizde daha kullanışlıdır.

 <select  ng-options="opt.id as opt.name for opt in users" ng-model="selectedUser"></select>

Buradaki örneği kontrol edin:

http://plnkr.co/edit/HrT5vUMJOtP9esGngbIV

<select name='partyid' id="partyid" class='span3'>
<option value=''>Select Party</option>
<option ng-repeat="item in partyName" value="{{item._id}}" ng-selected="obj.partyname == item.partyname">{{item.partyname}}
</option>
</select>

Nesne diziniz aşağıdaki gibi karmaşıksa:

$scope.friends = [{ name: John , uuid: 1234}, {name: Joe, uuid, 5678}];

Ve mevcut modeliniz şu şekilde ayarlandı:

$scope.user.friend = {name:John, uuid: 1234};

track byNg-model = "user.friend" de bir uuid'e sahip olduğu sürece , işlevi uuid'de (veya herhangi bir benzersiz alanda) kullanmaya yardımcı oldu :

<select ng-model="user.friend" 
ng-options="friend as friend.name for friend in friends track by friend.uuid"> 
</select>

Birkaç saat boyunca bununla mücadele ettim, bu yüzden bunun için bazı açıklamalar eklemek istiyorum, burada belirtilen tüm örnekler, verilerin bir hizmetten veya veritabanından gelen bir şey değil, komut dosyasının kendisinden yüklendiği durumları ifade eder, bu yüzden aynı problemi olan herkes için deneyimlerimi sunmak istiyorum.

Normalde sadece istediğiniz seçeneğin kimliğini veritabanınıza kaydedersiniz, bu yüzden ... gösterelim

service.js

myApp.factory('Models', function($http) {
var models = {};
models.allModels = function(options) {
    return $http.post(url_service, {options: options});
};

return models;
});

controller.js

myApp.controller('exampleController', function($scope, Models) {
$scope.mainObj={id_main: 1, id_model: 101};
$scope.selected_model = $scope.mainObj.id_model;
Models.allModels({}).success(function(data) {
    $scope.models = data; 
});
});

Son olarak kısmi html model.html

Model: <select ng-model="selected_model" 
ng-options="model.id_model as model.name for model in models" ></select>

temelde ben " model.id_model " modeli için model.name olarak bu model " model.id_model " bu değeri " mainObj.id_model " ile eşleşecek şekilde model kimliği kullanır işaret etmek istedim " selected_model ", bu "da sadece düz değerdir model.name olarak " yineleyici için etiket, nihayet " modellerinde modeli " bizim birlikte tüm bilmek hakkında sadece düzenli döngüdür.

Umarım bu birine yardımcı olur ve eğer varsa, lütfen oy verin: D

<select id="itemDescFormId" name="itemDescFormId" size="1" ng-model="prop" ng-change="update()">
    <option value="">English(EN)</option>
    <option value="23">Corsican(CO)</option>
    <option value="43">French(FR)</option>
    <option value="16">German(GR)</option>

Boş değer içeren bir seçenek eklemeniz yeterlidir. Çalışacak.

DEMO Plnkr

Bunu yapmanın daha kolay bir yolu, veri ng-init'i şu şekilde kullanmaktır :

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

Buradaki ana fark, eklemeniz gerekecek data-ng-model

Ng model niteliği seçilen seçeneğini belirler ve ayrıca boruya benzer bir filtre olanak sağlar orderBy: orderModel.value

index.html

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

controllers.js

$scope.orderOptions = [
    {"name":"Newest","value":"age"},
    {"name":"Alphabetical","value":"name"}
];

$scope.orderModel = $scope.orderOptions[0];

Birisi Chrome, IE 10/11, Firefox'ta zaman zaman sayfada doldurulmayan varsayılan değere koşuyorsa, HTML'deki doldurulmuş değişken için giriş / seçim alan kontrolüne bu özelliği eklemeyi deneyin:

<input data-ng-model="vm.x" data-ng-if="vm.x !== '' && vm.x !== undefined && vm.x !== null" />

Seçeneklerinizi bazı sayısal kimliklerle dizine eklemeyi umursamıyorsanız gerçekten basit.

1. $ Scope var - people dizinizi bildirin

   $scope.people= ["", "YOU", "ME"];

2. Yukarıdaki kapsamın DOM'sinde nesne oluşturun

   <select ng-model="hired" ng-options = "who for who in people"></select>

3. Oyun kumandanızda ng-modelinizi "işe alındı" olarak ayarladınız.

   $scope.hired = "ME";

İyi şanslar!!! Gerçekten çok kolay!

Sadece eklemek için böyle bir şey yaptım.

 <select class="form-control" data-ng-model="itemSelect" ng-change="selectedTemplate(itemSelect)" autofocus>
        <option value="undefined" [selected]="itemSelect.Name == undefined" disabled="disabled">Select template...</option>
        <option ng-repeat="itemSelect in templateLists" value="{{itemSelect.ID}}">{{itemSelect.Name}}</option></select>