我們如何使用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

包裝指令的所有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;
  }
 }
})

這里是一個演示