SORU
24 EKİM 2012, ÇARŞAMBA


Shift tuşu ile çalışan Açısal'In ng seçenekleri

Diğer mesajlar, Bu konuda okudum ama anlamaya olamaz. Dizi var:

$scope.items = [
   {ID: '000001', Title: 'Chicago'},
   {ID: '000002', Title: 'New York'},
   {ID: '000003', Title: 'Washington'},
];

Bu işlemek istiyorum

<select>
  <option value="000001">Chicago</option>
  <option value="000002">New York</option>
  <option value="000003">Washington</option>
</select>

Ve de=000002 KİMLİĞİ ile seçeneği seçmek istiyorum.

http://docs.angularjs.org/api/ng.directive:select bunu okuyup denedim ama anlayamadım.

CEVAP
24 EKİM 2012, ÇARŞAMBA


Unutulmaması gereken bir şey ngModelgereklingOptions... not çalışması için "set $scope.demek ki ng-model="blah" belirli bir değere blah".

Bunu deneyin:

<select ng-model="blah" ng-options="item.ID as item.Title for item in items"></select>

Burada Açısal eğer sen görmedin mi yoksa () belgelerine daha fazla:

dizi için veri kaynakları:

  • dizideki değer etiketi
  • değer olarak etiket dizideki seçin
  • dizideki değeri grup tarafından etiket grubu = dizi değeri için grup olarak etiket grubu seçin

veri kaynakları nesne:

  • nesne (anahtar , değer) etiketi
  • (anahtar , değer) olarak etiket nesneyi seçin
  • nesne için Grup (anahtar, değer) etiket grubu
  • nesne için grup olarak etiket grubu (anahtar, değer) seçin

EDİT: Açısal seçeneğini etiket değerleri . bazı açıklama İçin

ng-options, kullandığınızdaseçenek etiketleri ng seçenekleri tarafından yazılan değerleri her zaman seçenek etiketi ile ilgilidir dizi öğenin dizini olacak. Bu Açısal aslında seçtiğiniz kontrolleri ve sadece ilkel türler ile bütün nesneleri seçmenizi sağlar olmasıdır. Örneğin:

app.controller('MainCtrl', function($scope) {
   $scope.items = [
     { id: 1, name: 'foo' },
     { id: 2, name: 'bar' },
     { id: 3, name: 'blah' }
   ];
});
<div ng-controller="MainCtrl">
   <select ng-model="selectedItem" ng-options="item as item.name for item in items"></select>
   <pre>{{selectedItem | json}}</pre>
</div>

Yukarıdaki $scope.selectedItem içine bütün bir nesne doğrudan seçmek için izin verir.Anlamı, Açısal ile, seçenek etiketi hakkında endişelenmenize gerek yok. İzin Açısal, sadece kapsamında modeliniz ne umurunuzda olmalı o kolu.

Here is a plunker demonstrating the behavior above, and showing the html written out


EDİT 2: varsayılan seçenek ile ilgilenme

Varsayılan seçenek ilişkin yukarıda söz başarısız olduğum birkaç şey var.

İlk seçeneği seçip, boş seçeneğini kaldırma:

Model (ng-model) ng-options maddelerin tekrar ilk öğe için ayarlar ng-init basit ekleyerek bunu yapabilirsiniz:

<select ng-init="foo = foo || items[0]" ng-model="foo" ng-options="item as item.name for item in items"></select>

Not: bu foo eğer bir şey düzgün başlatılmasını olursa biraz deli olabilir"". falsy Bu durumda, foo başlatma denetleyicisi, büyük olasılıkla işlemek isteyeceksiniz.

Varsayılan seçenek özelleştirme:

Bu biraz farklı, yapmanız gereken burada tüm seçin bir çocuk gibi bir seçenek etiketi Ekle, boş değeri bir öznitelik ile, sonra Özelleştir İç metin:

<select ng-model="foo" ng-options="item as item.name for item in items">
   <option value="">Nothing selected</option>
</select>

Not: bu durumda bu "" seçenek, farklı bir seçeneği seçin. sonra bile orada kalır boş Bu Açısal altında seçer varsayılan davranışı için durum böyle değil.

Bir seçim sonra gizler yapılan özelleştirilmiş varsayılan bir seçenek

Eğer bir değer seçtikten sonra gitmek için özelleştirilmiş varsayılan seçenek istiyorsan, varsayılan seçenek için ng-hide bir öznitelik ekleyebilirsiniz:

<select ng-model="foo" ng-options="item as item.name for item in items">
   <option value="" ng-if="foo">Select something to remove me.</option>
</select>

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Anthony Le

    Anthony Le

    10 EKİM 2006
  • iBand IguJoo

    iBand IguJoo

    25 AĞUSTOS 2006
  • ŠĩŗĜŕôŵåɭȍҭҭ

    ŠĩŗĜŕô

    29 Kasım 2009