wie können wir mehrere Bedingungen in einem einfachen Zustand mit ng-Show und ng-hide

Question

Ich versuche, verwalten mehrere Bedingungen zu verbessern, unter Verwendung von ng-Show und ng-hide Direktiven, hier ist mein Code

HTML-Code

<my-directive controls="a,b,c"></my-directive> 

js Code

.directive('myDirective',function(){ 
    return{ 
    restrict:'E', 
    templateUrl:"parentHtml.html", 
    link:function(scope,elem,attr){ 
     var options = attr.controls; 
     if(options=="a,b,c"){ 
     scope.showMeAll=true; 
     }else if(options=="a"){ 
     scope.showmeA=true; 
     }else if(options=="b"){ 
     scope.showmeB=true; 
     }else if(options=="c"){ 
     scope.showmeC=true; 
     } 
    } 
    } 
}).directive('subDirective',function(){ 
    return{ 
    restrict:'E', 
    template:"<h2>aapple</h2>", 
    link:function(scope,elem,attr){ 

    } 
    } 
}).directive('subDirective1',function(){ 
    return{ 
    restrict:'E', 
    template:"<h2>BBatt</h2>", 
    link:function(scope,elem,attr){ 

    } 
    } 
}).directive('subDirective2',function(){ 
    return{ 
    restrict:'E', 
    template:"<h2>CCat</h2>", 
    link:function(scope,elem,attr){ 

    } 
    } 
}); 

ihr e ist mein parentHtml.html Code

<div class="row"> 
    <div ng-show="showMeAll"> 
    <sub-directive></sub-directive> 
    </div> 
    <div ng-show="showMeB"> 
    <sub-directive1></sub-directive1> 
    </div> 
    <div ng-show="showMeC"> 
    <sub-directive2></sub-directive2> 
    </div> 
</div> 

Mein Problem ist, wenn ich alle drei geben „a, b, c“ der Richtlinie Attribut dann in „parentHtml“ alle drei divs zeigen müssen, wenn ich gib nur zwei ie "a, b" dann in parentHtml nur zwei divs haben zu zeigen zB "apple" und "bat" und auch wenn gib nur eine string also "c" dann in parentHtml nur "cat" div zu zeigen, in eine einfache Art und Weise, wenn das Alphabet, das ich dem Direktivenattribut thet div gebe, zu zeigen hat. Hier ist meine http://plnkr.co/edit/6gAyAi63Ni4Z7l0DP5qm?p=preview. Bitte lösen Sie meine Frage auf einfache Weise.

Dank im Voraus

Answer 1

Sie haben einige Schreibfehler, anstelle von showmeA, showmeB, etc. sollte es showMeA, showMeB, etc.me mit einem Großbuchstaben M sein.

Abgesehen davon sind Ihre Prüfungen nicht sinnvoll, Sie verwenden if..else if prüft, was bedeutet, dass die Auswertung stoppt, sobald eine Bedingung wahr ist.

Auch in diesem Fall sollten Sie prüfen, ob der Wert des conditions-Attributs einen Buchstaben enthält und nicht, wenn es einem Buchstaben entspricht.

Hier ist eine Arbeitsversion Ihrer Richtlinie:

directive('myDirective',function(){ 
    return{ 
    restrict:'E', 
    templateUrl:"parentHtml.html", 
    link:function(scope,elem,attr){ 
     var options = attr.controls; 
     if(options.indexOf("a") !== -1){ 
     scope.showMeA=true; 
     } 
     if(options.indexOf("b") !== -1){ 
     scope.showMeB=true; 
     } 
     if(options.indexOf("c") !== -1){ 
     scope.showMeC=true; 
     } 
     scope.showMeAll = scope.showMeB && scope.showMeA && scope.showMeC; 
    } 
} 
}) 

und HERE ist eine Demo

Answer 2

Alle Ihre divs, die Wrap-Richtlinien haben Anreisen ng, so sollte der Code sein:

if(options=="a,b,c"){ 
    scope.showMeAll=true; 
    scope.showMeA=true; 
    scope.showMeB=true; 
    scope.showMeC=true; 
} 

ng-Show getreu dem Parnet div Durch die Einstellung, Anzeige wird nicht andere Kinder-Divs mit ng-show Child Divs haben unabhängige ng-show von Eltern.