Angularjs - dynamic ng-options

Question

Yazdığım bir yönerge ihtiyacım için, ng-options ifadesini dinamik olarak oluşturmalıyım. İşte denedim. Benim html şablonunda

// ... scope.labelProperty = 'name'; 
scope.selectOptions = "l." + scope.labelProperty + " for l in list"; 

: benim görevimde olarak

Bu "listesinde l için l.name" doğru ifade alma ng-seçeneklerinde sonuçlanır ama

<select class="form-control" 
    ng-model="selected.available" 
    ng-options="{{ selectOptions }}" 
    multiple 
    size="5"></select> 

seçenekleri ekranı yok .

Lütfen, herhangi bir fikir?

Answer 1

(mülkünüzü almak için javascript kullanın) şöyle görünecek şekilde kodunuzu değiştirin

:

// ... scope.labelProperty = 'name'; 
scope.selectOptions = "l[labelProperty] for l in list"; 

<select class="form-control" 
    ng-model="selected.available" 
    ng-options="{{ selectOptions }}" 
    multiple 
    size="5"></select> 

Answer 2

Bu eski bir soru olduğunu biliyorum ama benim zorluklara cevap birçok nedenle (eski Stackoverflow soru cevaplar geliyor Bunun bir başkasına yardım edip etmeyeceğini kim bilebilir?) ve bunu nasıl yapacağımı anlaması biraz zaman aldı. Bu aramada öğrendiğim teknik terim olan "Basamaklı Açılır Menüler" kavramına baktıktan sonra aşağıdaki çözümü buldum. Bunu yapmanın en iyi yolu olmayabilir, ancak şimdiye kadar yapabileceğim en iyisiydi ve paylaşacağımı düşündüğüm internette böyle bir örnek görmemiştim.

Andrew Kilise'nin ifade tabanlı ng-seçenekleri peki ya sen seçkin bir de bunu yaparsanız olduğunu tespit uygulayan çalıştı:

$scope.selectOptions = "product.description for product in productList" 

: Seçenek'i seçin Diyelim

ng-options="{{ selectOptions }}" 

olarak kontrolöre tanımlanır

$scope.selectOptions = "cat.name for cat in catList" 

01:

ve sonra kodda daha sonra bunu değiştirmek olmak başka açılır menüsünden bir kullanıcının seçimiyle diyelim

Seçme elemanını, bir tarayıcı geliştirici aracında (veya kaynak koduna bakarak) inceleyip seçmediğinizi, seçmen öğesinin aslında 'cat-in/cat'da cat için' ng-options = 'cat.name ile okuduğunu görürsünüz. ancak eleman yeni seçenekleri göstermek için yenilenmeyecek. Yani - Açısal ng-seçenekler işlevini değişiklikten tekrar başlatmaz.

<select class="form-control" 
    ng-model="selected.available"> 
<option ng-if="selectOptions == 'products'" ng-repeat="product in productList" value="{{product}}">{{product.name}}</option> 
<option ng-if="selectOptions == 'cats'" ng-repeat="cat in catList" value="{{cat}}">{{cat.name}}</option> 
</select> 

ayarlayabileceğiniz Bu şekilde:

Ben yenileme sorunlardan biri yoktu bulundu bu gerçekleştirmek için bir daha dinamik bir yol

yerine değil ng-seçenekler ama şöyle opsiyon elemanları kendilerini kontrol edildi İhtiyacınız ne olursa olsun ürünler/kediler için selectOptions ayarlayan bir işlevi çağırmak için başka bir açılır menüde bir ng değişimi. Angular, seçenek elemanını ng-if ile gizlemeyi/göstermeyi bilecek şekilde yerleşik fonksiyonlara sahiptir.