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必须显示ie“apple”和“bat”，如果只给一个字符串即“c”那么在parentHtml中只有“cat”div必须以简单的方式显示我给指令的字母表是什么属性thet div必须显示。这是我的http://plnkr.co/edit/6gAyAi63Ni4Z7l0DP5qm?p=preview。请以简单的方式解决我的问题。

提前致谢

Answer 1

包装指令的所有div都有ng-show，所以代码应该是：

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

通过将ng-show设置为true到parnet div，不会显示具有ng-show的其他子div。儿童div具有来自父母的独立ng-show。

Answer 2

您有一些拼写错误，而不是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;
  }
 }
})

和HERE是演示

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

2 个答案: