我们如何使用ng-show和ng-hide在简单的条件下管理多个条件

Question

I am trying to improve multiple 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 when I give all the three "a,b,c" to the directive attribute then in "parentHtml" all the three div's have to show, if I give only two ie "a,b" then in parentHtml only two div's have to show ie "apple" and "bat" and also if give only one string ie "c" then in parentHtml only "cat" div have to show, in a simple way if what the alphabet I give to the directive attribute thet div have to show. Here is my http://plnkr.co/edit/6gAyAi63Ni4Z7l0DP5qm?p=preview . Please solve my question in a simple way.

Thanks In Advance

Answer 1

All your divs that wrap 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 to the parnet div, wont display other child divs that have ng-show. Child divs have independent ng-show from parent.

Answer 2

You have some spelling errors, instead of showmeA, showmeB, etc. it should be showMeA, showMeB, etc. me with a uppercase M .

Beside that, your checks don't make sense, you're using if..else if checks which means that the evaluation will stop as soon as a condition is true.

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

Here is a 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 demo