SORU
29 Aralık 2012, CUMARTESİ


AngularJS koşullu mantık şablonu

Bu gibi görünen açısal bir şablon var

<div ng-repeat="message in data.messages" ng-class="message.type">

    <div class="info">
        <div class="type"></div>
        <div class="from">From Avatar</div>
        <div class="createdBy">Created By Avatar</div>
        <div class="arrowTo">
            <div class="arrow"></div>
            <div class="to">To Avatar</div>
        </div>
        <div class="date">
            <div class="day">25</div>
            <div class="month">Dec</div>
        </div>
    </div>

    <div class="main">
        <div class="content">
            <div class="heading2">{{message.title}}</div>
            <div ng-bind-html="message.content"></div>
        </div>

    </div>

    <br />
    <hr />
    <br />

</div>

a JSfiddle veri bağlı göstermek için hazırladım.

Yapmam gereken, yapmak"", "için" ve "arrowTo" koşullu olarak, verilerin içeriğine bağlı olarak Haritayı divs.

Günlüğü bu

  • Eğer "" sonra "" ve veri bağlama ama "oluşturulmuş" div . gösterme div dizide veri nesneden varsa
  • Eğer "" ama "" nesne "oluşturulmuş" böl ve veri bağlama. gösteri oluşturulmuş bir nesne ise yok
  • Eğer "veri" "böl ve veri bağlama. arrowTo show" nesne varsa

Düz İngilizce olarak, eğer bir Gönderen adresi belli ise, aksi takdirde yerine kaydı yaratan ve adres göster o zaman o da mı varsa göster.

Ng-anahtarı kullanarak içine baktım ama eğer veri varsa orada boş bir div bırakır ekstra biçimlendirme eklemek gerekiyor sanırım. Artı direktifler yuva geçiş yapmak istiyorum ve eğer işe yarayacağından emin değilim.

Herhangi bir fikir?

GÜNCELLEME:

Eğer kendi Direktifi (nasıl bilseydim!) yazacak olsaydım o zaman burada kullanmak istiyorum nasıl göstermek için bazı sözde kodu

<div ng-if="showFrom()">
    From Template Goes Here
</div>
<div ng-if="showCreatedBy()">
    CreatedBy Template Goes Here
</div>
<div ng-if="showTo()">
    To Template Goes Here
</div>

Bunların her biri işlev/ifade yanlış olarak değerlendirilirse ortadan kalkacaktır.

CEVAP
29 Aralık 2012, CUMARTESİ


Açısal 1.1.5 ng-if Direktif tanıttı. Bu özellikle bu sorun için en iyi çözüm. Eğer Açısal eski bir sürümünü kullanıyorsanız, açısal-uı ui-if Yönerge kullanmayı düşünün.

Eğer burada genel soru-cevap "şablonlar koşullu mantık" da göz önünde bulundurun: . arayan ulaşan


Orijinal cevabı:

Burada çok da iyi olmayan bir "ng-" eğer Yönetmeliği:

myApp.directive('ngIf', function() {
    return {
        link: function(scope, element, attrs) {
            if(scope.$eval(attrs.ngIf)) {
                // remove '<div ng-if...></div>'
                element.replaceWith(element.children())
            } else {
                element.replaceWith(' ')
            }
        }
    }
});

bu HTML sözdizimi sağlar:

<div ng-repeat="message in data.messages" ng-class="message.type">
   <hr>
   <div ng-if="showFrom(message)">
       <div>From: {{message.from.name}}</div>
   </div>    
   <div ng-if="showCreatedBy(message)">
      <div>Created by: {{message.createdBy.name}}</div>
   </div>    
   <div ng-if="showTo(message)">
      <div>To: {{message.to.name}}</div>
   </div>    
</div>

Fiddle.

() replaceWith DOM. gereksiz içerikleri kaldırmak için kullanılır

Ayrıca Google muhtemelen şartlı arka plan görüntüleri yüklemek için kullanılabilir belirttiğim gibi gereken özel bir yönerge yerine ng-Haritayı kullanmak istiyorum. (Diğer okuyucuların yararına, Jon Google'da söyledi : "her iki yöntem de display:none kullanır ve DOM ekstra biçimlendirme bırakır çünkü kaçmaya çalışıyorum Geographic-Haritayı kullanın. Bu gizli eleman hala en tarayıcılarda yüklü olacak bir arka plan görüntüsü var, çünkü bu senaryoda, belirli bir sorundur")..
Ayrıca How do I conditionally apply CSS styles in AngularJS? bkz

angular-ui ui-if Direktif ise durumu/ifade değişiklikleri izler. Benim yok. Benim basit bir uygulama eğer bu model sadece şablon çıktı etkileyen böyle değişirse görünümü güncelleştirmek doğru ise, durum/deyim cevap değişirse görünümü düzgün güncelleme olmayacak.

E. g., eğer bir değeri.model adı değişir, görünümü günceller. Ama eğer delete $scope.data.messages[0].from, ismini görünümünden kaldırılır, ancak şablon varsa ortaya ifade izleniyor çünkü görünümden kaldırılacaktır.

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

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Phlearn Photoshop and Photography Tutorials

    Phlearn Phot

    11 EKİM 2011
  • TheFlightsuit

    TheFlightsui

    22 HAZİRAN 2009
  • williamfitzsimmons

    williamfitzs

    14 Mart 2008