Açısal js'de koşullu ng-include

94

Ng-include'i koşullu olarak angular JS'de nasıl yapabilirim?

Örneğin, değişken xolarak ayarlanmışsa , yalnızca bir şeyi dahil etmek istiyorum true.

<div ng-include="/partial.html"></div>

angularjs angularjs-ng-include

— JustGoscha
kaynak

120

Angular v1.1.5 veya sonraki bir sürümünü kullanıyorsanız ng- if'i de kullanabilirsiniz :

<div ng-if="x" ng-include="'/partial.html'"></div>

Daha eski bir sürüme sahipseniz:

Ng anahtarını kullanın :

<div ng-switch on="x">
   <div ng-switch-when="true" ng-include="'/partial.html'"></div>
</div>

Vaktini boşa harcamak

— Mark Rajcok
kaynak

5

Evet, şu anda 1.2'de bozuk: github.com/angular/angular.js/issues/3627

— Mark Rajcok

2

Sorun v1.2.2-23ba287 code.angularjs.org/snapshot/angular.js'de düzeltildi

— Eugene Gluhotorenko

7

Bkz. Github.com/angular/angular.js/issues/3627#issuecomment-23539882 ; mevcut sürümlerde (1.2. *) ng-switch ve ng-include'i aynı öğede kullanamazsınız, bu nedenle şunun gibi bir şeye ihtiyacınız vardır: <div ng-switch-when = "true"> <div ng-include = "'bir şey '"> </div> <// div>

— Maarten

68

Sen de yapabilirsin

<div ng-include="getInclude()"></div>

Denetleyicinizde

$scope.getInclude = function(){
    if(x){
        return "partial.html";
    }
    return "";
}

— Ganaraj
kaynak

Gerçekten güzel. ng-switchİşaretli cevap benim için çalışmadı.

— im1dermike

1

Bir Denetleyici set görünüm dosyaları için uygun mu? Sanırım, Hayır. @Mark Rajcok cevabı doğru.

— ivahidmontazer

16

Cevaplardan birinin biraz daha okunaklı versiyonu. Artı ayarı ng-includeiçin nulltıpkı - uzaklaşmaların elemanı ng-if.

<div ng-include="x ? 'true-partial.html' : null"></div>

— Rafał Lindemann
kaynak

11

Koşul yeterince basitse, koşullu mantığı doğrudan ng-include ifadesine de koyabilirsiniz:

<div ng-include="x && 'true-partial.html' || 'false-partial.html'"></div>

İfadenin xtek tırnak içinde olmadığını ve bu nedenle değerlendirildiğini unutmayın. Daha fazla ayrıntı için http://plnkr.co/edit/4fvNDa6Gm3dbVLgsAZrA adresine bakın.

— dspies
kaynak

Kabul edilen çözümün, kontrol koşulu ve gerçek dahil etme güzel bir şekilde ayrıldığı için aslında daha okunabilir olduğunu söyleyebilirim.

— Tobias

2

Benzer bir sorunla karşılaştım ve bu bulgu birine yardımcı olabilir mi? Bağlantı tıklandığında farklı bölümler göstermem gerekiyor, ancak ng-if ve ng-anahtarının her ikisi de bu senaryoda çalışmıyordu (Aşağıdaki kod çalışmıyordu).

<button type="button" class="btn btn-link" ng-click="viewType('LIST')">List All</button>
<button type="button" class="btn btn-link" ng-click="viewType('EDIT')">Edit</button>
<button type="button" class="btn btn-link" ng-click="viewType('VIEW')">View</button>

<section class="col-md-8 left-col">
    <span ng-if = "LIST">
        <div data-ng-include="'./app/view/articles/listarticle.html'">
    </span>
    <span ng-if = "EDIT">
        <div data-ng-include="'./app/view/articles/editorarticle.html'">
    </span>

</section>

Yaptığım şey, ng-if kullanmak yerine, Bağlantıya tıklandığında sadece partialArticleUrl değerini güncellemek (denetleyicide bir modeldir) ve html'de aşağıdaki kodu bildirmek.

        <section class="col-md-8 left-col">
            <div data-ng-include="partialArticleUrl">
        </section>

— KanhuP2012
kaynak