AngularJS 指令仅当条件为真时 [英] AngularJS directive only when the condition is true

问题描述

我将在 ng-repeat 项目中有一个 contextmenu 指令.根据条件是否为真，应应用该指令.如何设置条件，例如仅当 item.hasMenu == true 然后应用指令?

I am going to have a contextmenu directive in ng-repeat items. Based on whether a condition is true, the directive should be applied. How do I put a condition like only when item.hasMenu == true then apply the directive ?

<ul ng-controller="ListViewCtrl" >
<li contextmenu ng-repeat="item in items">{{item.name}} </li>
</ul>

编辑

这似乎对我有用.首先是指令.

This seems to have worked for me. First the directive.

app.directive('menu',function(){

    return {
        restrict : 'A',

        link : function(scope,element,attrs){

            if(scope.hasMenu){
                        element.contextmenu({
                                        menu:[
                                        {title:"Remove" , "cmd" : "remove"},
                                        {title:"Add" , "cmd" : "add"},
                                        ],
                                        select:function(event,ui){
                                            //alert("select " + ui.cmd + " on" + ui.target.text());
                                            if (ui.cmd ==='remove'){
                                                alert('Remove selected on ' + scope.item);
                                            }
                                            if (ui.cmd ==='add'){
                                                alert("Add selected");
                                            }
                                        }
                        });
            }

        }
    }
    }
);

然后是 html

 <ul ng-controller="ListViewCtrl" >
<li menu  ng-repeat="item in items">{{item.name}} </li>
</ul>

推荐答案

你能用 ng-if 做这样的事情吗?

Can you do something like this, using ng-if?

<ul ng-controller="ListViewCtrl" >
   <li ng-repeat="item in items">
      <span>{{item.name}}</span>
      <div contextmenu ng-if="item.hasMenu"></div>
   </li>
</ul>

这里是 ng-if 的文档.

如果您要关闭类的上下文菜单，您应该可以这样做:

If you are driving the context menu off of a class, you should be able to do this:

<ul ng-controller="ListViewCtrl" >
   <li ng-class="{'hasmenu': item.hasMenu}" ng-repeat="item in items">{{item.name}} </li>
</ul>

这篇关于AngularJS 指令仅当条件为真时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！