Midhunsai Midhunsai - 3 months ago 47
AngularJS Question

how can we manage multiple conditions in a simple condition using ng-show and ng-hide

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 i.e "a,b" then in parentHtml only two div's have to show i.e "apple" and "bat" and also if give only one string i.e "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

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

Comments