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

Question

我正在尝试使用ng-show和ng-hide使用指令来改善多个条件,这是我的代码

HTML代码

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

js代码

.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){

    }
  }
});

这是我的parentHtml.html代码

<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>

我的问题是当我将所有三个"a,b,c"赋予指令属性然后在"parentHtml"中所有三个div必须显示,如果我只给出两个即"a,b"那么在parentHtml中只有两个div的必须显示即"苹果"和"蝙蝠",如果只给出一个字符串,即"c",那么在parentHtml中只有"cat"div必须以简单的方式显示我给指令属性thet div的字母表是什么必须表明.这是我的http://plnkr.co/edit/6gAyAi63Ni4Z7l0DP5qm?p=preview.请以简单的方式解决我的问题.

提前致谢

Answer 1

您有一些拼写错误，而不showmeA, showmeB, etc.应该showMeA, showMeB, etc. me使用大写M。

除此之外，您的检查没有意义，您使用的if..else if检查意味着一旦条件成立，评估就会停止。

另外，在这种情况下，您应该检查属性的值是否conditions包含字母，而不是是否等于字母。

这是您的指令的工作版本：

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

这是一个演示