怎样才能用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-隐藏

回答

相关问题