How can we manage multiple conditions in a simple state using ng-show and ng-hide

Question

I am trying to improve several conditions using ng-show and ng-hide using directives, here is my 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){ } } }); 

here is my 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> 

My problem is that I pass all three attributes “a, b, c” to the directive attribute and then to “parentHtml” all three divs should show if I give only two, that is, “a, b” and then in parentHtml, only two divs should show, for example, “apple” and “bat”, and also give only one line, that is, “c”, and then in parentHtml only “cat” div should show, in a simple way, if which alphabet I give the directive the attribute thet div should be displayed. Here is my http://plnkr.co/edit/6gAyAi63Ni4Z7l0DP5qm?p=preview . Please resolve my question in a simple way.

Thanks in advance

Answer 1

You have spelling errors instead of showmeA, showmeB, etc. it should be showmeA, showmeB, etc. me with capital letters M

In addition, your checks do not make sense; you use if..else if checks, which means that the evaluation will stop as soon as the condition is true.

In addition, in this case, you should check whether the value of the conditions attribute contains a letter instead of if it is equal to the letter.

Here is the working version of your directive:

 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; } } }) 

and HERE is a demonstration

Answer 2

All your divs that contain directives have ng-show, so the code should be:

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

By setting ng-show to true for the parnet div, no other child divs that have ng-show will be displayed. Child divs have independent ng-show from the parent.