怎樣才能用NG-展示和NG-隱藏

我試圖提高使用NG-展示和NG-隱藏使用指令多個條件中一個簡單的狀態管理多個條件，這裏是我的代碼怎樣才能用NG-展示和NG-隱藏

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

    } 
    } 
});

她e是我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必須顯示，即「apple」和「bat」，如果只給出一個字符串即「c」，那麼在parentHtml中只有「cat」div必須顯示，一個簡單的方法，如果我給的指令屬性thet div的字母表必須顯示。這是我的http://plnkr.co/edit/6gAyAi63Ni4Z7l0DP5qm?p=preview。請用簡單的方法解決我的問題。

在此先感謝

來源

2016-07-26 Midhunsai

而不是檢查是否'controls'屬性的值等於一個字母如：'選項= =「a」'你應該檢查它是否包含該字母'options.indexOf（「a」）！== -1'。 – Titus

這是一個工作版本http://plnkr.co/edit/ERdku20aXECxbP30OlP3?p=預覽旁邊的if（...）else if（...）...'你也有一些拼寫錯誤的錯誤，你正在使用'showme ...'而不是'showMe ...'。 – Titus

你有一些拼寫錯誤，而不是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是一個演示

來源

2016-07-26 12:54:12 Titus

它是完美的工作，但當我們只給控件中的「a」時，它並沒有顯示「蘋果」剩下的一切都很順利@Titus – Midhunsai

@Midhunsai這是因爲，在你模板中，你已經設置了「Applet」當'showMeAll'設置爲'true'時，你需要改變它，所以當'showMeA'爲'true'時，它會顯示「Apple」，或者當只有'showMeA'設置爲'true'時改變指令來設置'showMeAll'爲真。 a'被選中 – Titus

是的，它正在工作，謝謝@Titus – Midhunsai

您的所有div那套指令都NG-秀的，所以代碼應該是：

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

伍秀設置爲true的parnet DIV，不會顯示其它具有ng-show的子div。小孩divs有獨立的ng-show來自父母。

來源

2016-07-26 12:46:53

怎樣才能用NG-展示和NG-隱藏

回答

相關問題