angularjs – 在Angular伪指令模板中有条件地添加数据属性
发布时间:2020-12-17 08:55:25 所属栏目:安全 来源:网络整理
导读:我正在一个指令的模板。如果范围中的属性设置为true,那么应该将data-toggle =“dropdown”附加到元素。如果变量为false,则此数据属性不应作为元素的属性呈现。 例如,如果范围变量为true,模板应呈现: span data-toggle="dropdown"/span 如果为false,模
我正在一个指令的模板。如果范围中的属性设置为true,那么应该将data-toggle =“dropdown”附加到元素。如果变量为false,则此数据属性不应作为元素的属性呈现。
例如,如果范围变量为true,模板应呈现: <span data-toggle="dropdown"></span> 如果为false,模板应该呈现: <span></span> 模板是什么样子来完成这个? 例如,我知道我可以使用ng-class有条件地包含一个类。如果我想让模板呈现这: <span class="dropdown"></span> 然后我的模板将如下所示: "<span ng-class="{ 'dropdown': isDropDown }"></span> 如果范围变量isDropDown为false,那么模板将简单地渲染: <span></span> 所以在模板中有一种方式有条件地添加一个class =“dropdown”。有模板的语法,允许我有条件地添加data-toggle =“dropdown”? 我为模板尝试的事情之一是: "<span data-toggle="{ 'dropdown': isDropDown }"></span> 我认为上面的模板是,如果范围变量isDropDown为true,data-toggle的值将被设置为“下拉”。如果isDropDown为false,那么data-toggle的值将只是一个空字符串“”。这似乎不工作,虽然。
我认为一个好的方法是使用ng-attr-后跟你想要评估的表达式。
在你的情况下,它会像: <span ng-attr-data-toggle="{{ isValueTrue ? 'toggle' : 'notToggle' }}"></span> 这里有一个fiddle的例子。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |