Birden çok koşullu açısal JS ng-if


151

Böyle bir şeye sahip olmanın mümkün olup olmadığını bilmek istiyorum:

div ng-repeat="(k,v) in items"
<div ng-if="k == 'a' || k == 'b'">
    <!-- SOME CONTENT -->
</div>

Bu öğelerin bir istek yoluyla alınan bir JSON kapsayıcı olduğunu bilmek, bu yüzden anahtar, değer yöntemi kullanıyorum.

Teşekkürler

Soruyorum çünkü googling yapmayı denedim, ancak alabileceğim tek sonuç vardı ng-switch, ama kullanmak zorundayım ng-if.


3
JavaScript'te veya operatörü ||.
JB Nizet

Yanıtlar:


194

Tabi ki yapabilirsin. Gibi bir şey:

HTML

<div ng-controller="fessCntrl">    
     <label ng-repeat="(key,val) in list">
       <input type="radio" name="localityTypeRadio" ng-model="$parent.localityTypeRadio" ng-value="key" />{{key}}
         <div ng-if="key == 'City' || key == 'County'">
             <pre>City or County !!! {{$parent.localityTypeRadio}}</pre>
         </div>
         <div ng-if="key == 'Town'">
             <pre>Town!!! {{$parent.localityTypeRadio}}</pre>
         </div>        
      </label>
</div>

JS

var fessmodule = angular.module('myModule', []);

fessmodule.controller('fessCntrl', function ($scope) {

    $scope.list = {
        City: [{name: "cityA"}, {name: "cityB"}],
        County: [{ name: "countyA"}, {name: "countyB"}],
        Town: [{ name: "townA"}, {name: "townB"}]
      };

    $scope.localityTypeRadio = 'City';
});

fessmodule.$inject = ['$scope'];

Demo Keman


20 giriş alanım varsa ve gönder düğmesini yalnızca tüm alanlar doldurulmuşsa etkinleştirmem gerekiyorsa. Bu durumda, çok fazla koşul eklemeliyim. Bu biraz kafa karıştırıcı. Başka uygun bir çözüm var mı?
Mr_Perfect

@CharanCherry Açısal form doğrulamasına bir göz atın. Bu şekilde, gerekli tüm alanları ng olarak ayarlayabilir ve form düğmesinin geçerliliğini kontrol edebilirsiniz, örneğin, gönder düğmesindeki bir ng devre dışı bırakılmış ifadede. cfr fdietz.github.io/recipes-with-angular-js/using-forms/…
Gecko IT

76

VEYA operatör:

<div ng-repeat="k in items">
    <div ng-if="k || 'a' or k == 'b'">
        <!-- SOME CONTENT -->
    </div>
</div>

Okumak için yeterince basit olsa da, bir geliştirici olarak 'a' 'k' 'b' vb.

Örneğin:

<div class="links-group" ng-repeat="group in groups" ng-show="!group.hidden">
    <li ng-if="user.groups.admin || group.title == 'Home Pages'"> 
        <!--Content-->
    </li>
</div>

Başka bir OR örneği

<p ng-if="group.title != 'Dispatcher News' or group.title != 'Coordinator News'" style="padding: 5px;">No links in group.</p>

AND operatörü (Bu yığın akışı akışında tökezleyenler için VEYA yerine bir AND arıyorlar)

<div class="links-group" ng-repeat="group in groups" ng-show="!group.hidden">
    <li ng-if="user.groups.admin && group.title == 'Home Pages'"> 
        <!--Content-->
    </li>
</div>

Tamam, böylece tüm tarayıcılar &geçerli bir karakter olarak tanıyor gibi görünüyor . Ancak &, bir öznitelikte kullanımın geçerli html olmadığı belirtilmelidir. Bkz. < Html.spec.whatwg.org/multipage/syntax.html#syntax-attributes >, daha spesifik olarak: "Özellik değerleri, metnin belirsiz ve işareti içermeyeceği ek kısıtlama hariç, metin ve karakter referanslarının bir karışımıdır. " Ayrıca bu yanıta bakın: < stackoverflow.com/a/5320217/788553 >.
jmlopez

Açısal çalışma yapmak için html'de bileşik ifadeler kullanmamız gerekiyorsa, bileşik ifadeleri kapsama bağlı bir fonksiyona koymayı ve böylece bu mantığı html bölümünden kaldırmayı tercih ederim.
jmlopez

HTML5, Angular düşünülerek yazılmadı. Bunun yerine google parlak çocuklar yerine Angular yazdı - spec yararlanmak ve böylece "&" ile bir Açısal İfade yazma çok normaldir. Elbette, Asp.net MVC'de Razor View sayfalarını yaptığımda olduğu gibi Görünüm'e iş kuralları koymamayı tercih ederim, ancak cevabım tamamen soru sorusu bağlamında.
Tom Stickel

1
Cevabınızla ilgili yanlış bir şey yok Tom, gösterdikleriniz gibi bileşik ifadeler de yazıyorum çünkü tembelim (veya acelem var) ve işe yarıyor. Ama sonra her zaman kaçma hakkındaki bu kuralı hatırlıyorum &. Cevabını tökezlememin nedeni budur. İnsanları HTML spesifikasyonlarından haberdar etmek için o bağlantıları koymak istedim, dediğiniz gibi "HTML5 Angular düşünülerek yazılmadı".
jmlopez

1

her iki koşul da işten daha doğruysa zorunlu & nüsha için && ile deneyebilirsiniz

//div ng-repeat="(k,v) in items"

<div ng-if="(k == 'a' &&  k == 'b')">
    <!-- SOME CONTENT -->
</div>

0

JavaScript Kodu

function ctrl($scope){
$scope.call={state:['second','first','nothing','Never', 'Gonna', 'Give', 'You', 'Up']}


$scope.whatClassIsIt= function(someValue){
     if(someValue=="first")
            return "ClassA"
     else if(someValue=="second")
         return "ClassB";
    else
         return "ClassC";
}
}

0

HTML Kodu

<div ng-app>
<div ng-controller='ctrl'>
    <div ng-class='whatClassIsIt(call.state[0])'>{{call.state[0]}}</div>
    <div ng-class='whatClassIsIt(call.state[1])'>{{call.state[1]}}</div>
    <div ng-class='whatClassIsIt(call.state[2])'>{{call.state[2]}}</div>
    <div ng-class='whatClassIsIt(call.state[3])'>{{call.state[3]}}</div>
    <div ng-class='whatClassIsIt(call.state[4])'>{{call.state[4]}}</div>
    <div ng-class='whatClassIsIt(call.state[5])'>{{call.state[5]}}</div>
    <div ng-class='whatClassIsIt(call.state[6])'>{{call.state[6]}}</div>
    <div ng-class='whatClassIsIt(call.state[7])'>{{call.state[7]}}</div>
</div>

JavaScript Kodu

function ctrl($scope){
$scope.call={state:['second','first','nothing','Never', 'Gonna', 'Give', 'You', 'Up']}


$scope.whatClassIsIt= function(someValue){
     if(someValue=="first")
            return "ClassA"
     else if(someValue=="second")
         return "ClassB";
    else
         return "ClassC";
}
}

Lütfen cevaplarınızı bir araya getirip diğerini silebilir misiniz?
Tom M
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.