AngularJS-有条件地使用属性指令

喜悦

我正在使用“可拖动”指令来支持图像拖动。但是,根据用户的角色,我需要为某些用户组禁用图像拖动。我使用了以下代码。

<!--draggable attribute is used as handle to make it draggable using jquery event-->           
<li  ng-repeat="template in templates" draggable id="{{template._id}}" type="template" class="template-box">            
<!-- Images and other fields are child of "li" tag which can be dragged.-->                    
</li> 

该方法dragSupported在模板范围内,并返回truefalse我不想为所返回的每个值创建两个大的重复<li>元素换句话说,我不是在寻找以下方法来解决此问题。ng-ifdragSupported()

<!--draggable attribute is used as handle to make it draggable using jquery event-->           
<li ng-if="dragSupported() ==true"  ng-repeat="template in templates" draggable id="{{template._id}}" type="template" class="template-box">            
<!-- Images and other fields are child of "li" tag which can be dragged.-->                    
</li>
<!--remove "draggable" directive as user doesn't have permission to drag file -->
<li ng-if="dragSupported() !=true"  ng-repeat="template in templates"  id="{{template._id}}" type="template" class="template-box">            
<!-- Images and other fields are child of "li" tag which can be dragged.-->                    
</li>

还有其他方法可以避免代码重复吗?

沃尔特·罗曼(Walter Roman)

ng-attr-<attrName>

Angular包含对有条件声明HTML属性的支持,作为动态标题ng-attr-<attrName>指令。

的官方文件 ng-attr

在您的情况下,代码可能如下所示:

<li
    id="{{template._id}}"
    class="template-box"
    type="template"
    ng-repeat="template in templates"
    ng-attr-draggable="dragSupported() === true"
></li>

演示版

JSFiddle

这包含以下值用法的示例:truefalseundefinednull10,和""请注意,通常为假的值可能如何产生意外结果。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在angularJS指令中有条件地应用属性?

来自分类Dev

如何在angularJS指令中有条件地应用属性?

来自分类Dev

AngularJS有条件地添加指令

来自分类Dev

有条件地在angularjs中添加/删除属性

来自分类Dev

使用AngularJS有条件地更改CSS

来自分类Dev

AngularJs有条件地将自定义指令应用于HTML

来自分类Dev

如何在AngularJS中有条件地应用指令?

来自分类Dev

AngularJS-根据单选按钮值有条件地应用所需的属性

来自分类Dev

如何在AngularJS中有条件地设置所选属性

来自分类Dev

AngularJS有条件地删除CSS悬停

来自分类Dev

在AngularJS应用中有条件地注入模块

来自分类Dev

在AngularJS中有条件地调用函数

来自分类Dev

有条件地更改angularjs元素的颜色?

来自分类Dev

在AngularJS中有条件地绑定数据

来自分类Dev

AngularJS:有条件地显示Aria描述

来自分类Dev

AngularJS:如何有条件地应用视图动画?

来自分类Dev

AngularJS有条件地删除CSS悬停

来自分类Dev

在AngularJS中有条件地调用函数

来自分类Dev

AngularJS:有条件地显示Aria描述

来自分类Dev

angularJS有条件地重定向用户

来自分类Dev

使用AngularJS在选项标签上有条件地设置类

来自分类Dev

如何使用AngularJS在HTML文件中有条件地插入字符串?

来自分类Dev

angularjs:具有条件类型属性的输入标签?

来自分类Dev

有条件的单选按钮angularjs

来自分类Dev

有条件地基于控制器变量的AngularJS指令

来自分类Dev

在angularjs模块初始化期间有条件地注入依赖项

来自分类Dev

是否可以在AngularJS中有条件地打开和关闭过滤器?

来自分类Dev

AngularJS在应用页面上的导航栏中有条件地显示登录/注销按钮

来自分类Dev

如何使AngularJS有条件地不在div中执行任何代码?

Related 相关文章

  1. 1

    如何在angularJS指令中有条件地应用属性?

  2. 2

    如何在angularJS指令中有条件地应用属性?

  3. 3

    AngularJS有条件地添加指令

  4. 4

    有条件地在angularjs中添加/删除属性

  5. 5

    使用AngularJS有条件地更改CSS

  6. 6

    AngularJs有条件地将自定义指令应用于HTML

  7. 7

    如何在AngularJS中有条件地应用指令?

  8. 8

    AngularJS-根据单选按钮值有条件地应用所需的属性

  9. 9

    如何在AngularJS中有条件地设置所选属性

  10. 10

    AngularJS有条件地删除CSS悬停

  11. 11

    在AngularJS应用中有条件地注入模块

  12. 12

    在AngularJS中有条件地调用函数

  13. 13

    有条件地更改angularjs元素的颜色?

  14. 14

    在AngularJS中有条件地绑定数据

  15. 15

    AngularJS:有条件地显示Aria描述

  16. 16

    AngularJS:如何有条件地应用视图动画?

  17. 17

    AngularJS有条件地删除CSS悬停

  18. 18

    在AngularJS中有条件地调用函数

  19. 19

    AngularJS:有条件地显示Aria描述

  20. 20

    angularJS有条件地重定向用户

  21. 21

    使用AngularJS在选项标签上有条件地设置类

  22. 22

    如何使用AngularJS在HTML文件中有条件地插入字符串?

  23. 23

    angularjs:具有条件类型属性的输入标签?

  24. 24

    有条件的单选按钮angularjs

  25. 25

    有条件地基于控制器变量的AngularJS指令

  26. 26

    在angularjs模块初始化期间有条件地注入依赖项

  27. 27

    是否可以在AngularJS中有条件地打开和关闭过滤器?

  28. 28

    AngularJS在应用页面上的导航栏中有条件地显示登录/注销按钮

  29. 29

    如何使AngularJS有条件地不在div中执行任何代码?

热门标签

归档