Conditionally adding data-attribute in Angular directive template

Question

I'm working on the template for a directive. If a property in the scope is set to true, data-toggle="dropdown" should be appended to the element. If the variable is false, this data attribute should not render as an attribute of the element.

For example, if scope variable is true, the template should render:

<span data-toggle="dropdown"></span>

If false, the template should render:

<span></span>

What would the template look like to accomplish this?

For example, I know that I can use ng-class to conditionally include a class. If I want the template to render this:

<span class="dropdown"></span>

Then my template would look like this:

"<span ng-class="{ 'dropdown': isDropDown }"></span>

If scope variable isDropDown is false, then the template will simply render:

<span></span>

So there's a way in a template to conditionally add a class="dropdown". Is there a syntax for templates that allows me to conditionally add data-toggle="dropdown"?

One of the things I've tried for the template is:

"<span data-toggle="{ 'dropdown': isDropDown }"></span>

My thinking with the above template is that if the scope variable isDropDown is true, the value of data-toggle will be set to "dropdown". If isDropDown is false, then the value of data-toggle would simply be an empty string "". That doesn't seem to work though.

I'm a bit confused about what are you actually asking for. Do you want to know what the directive would look like? — Wawy
– Wawy, Commented Feb 26, 2014 at 18:27
I realize I've done a poor job of trying to articulate my question. I've updated it the hopes that it makes more sense. I don't have the angular vocabulary yet to make more sense. — core
– core, Commented Feb 26, 2014 at 18:34
Possible duplicate of What is the best way to conditionally apply attributes in Angular? — T J
– T J, Commented Jan 3, 2016 at 9:40

Aurelio · Accepted Answer · 2014-10-29 15:02:42Z

86

I think a good way could be to use ng-attr- followed by the expression you want to evaluate. In your case it would be something like:

<span ng-attr-data-toggle="{{ isValueTrue ? 'toggle' : 'notToggle' }}"></span>

Here's a fiddle with an example.

edited Oct 29, 2014 at 15:02

answered Jul 12, 2014 at 22:24

Aurelio

25.9k9 gold badges62 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Aurelio Over a year ago

@LittleBigBot I might be missing your point here. Can you provide any sample code to confirm that and better explain what you mean for "general attributes"/not working "for directives"?

Aurelio Over a year ago

I tested on some directives and even with isolate scope, replace and template it still works for me, see: jsfiddle.net/gleezer/hrdoyz04/1

Belladonna Over a year ago

Yeah, you need two attributes to do it correctly for directives. But this fiddle is what I mean, you can set the to be true, false, but it will always render the directive: jsfiddle.net/littlebigbot/9ym6nnck

Belladonna Over a year ago

There are two attributes on this div: <div my-var="{{myVar}}" my-directive>

Petr Urban Over a year ago

ng-attr-myattribute="{{myCondition ? '' : undefined}}" In case you want to conditionally remove and add attribute (with empty attribute value), use this. Attribute is added if condition is true, attribute is removed if condition is false.

Garfi · Accepted Answer · 2015-06-05 08:35:50Z

42

will produce when isTrue=true : 

and when isTrue=false : 

answered Jun 5, 2015 at 8:35

Garfi

5455 silver badges3 bronze badges

3 Comments

cha Over a year ago

Thanks a lot... This works for me. I have got chance to solve my problem. It was <li ng-repeat="node in data" ui-tree-node ng-include="'nodes_renderer.html'" ng-attr-data-nodrag="{{node.shared_status == 0 && true || undefined }}"></li>

Andreas Linnert Over a year ago

Has this behavior been changed in a particular version? It works for me. undefined removes the attribute. I'm using 1.5.5.

Splaktar Over a year ago

The docs for this are here: docs.angularjs.org/guide/interpolation

Wawy · Accepted Answer · 2014-02-26 21:51:37Z

8

At the moment, there is no angular directive that allows you to remove or add an attribute conditionally. You can do ng-switch around the span, one with that attr and another one without it.

<div ng-switch on="condition">
<span data-toggle="dropdown" ng-switch-when="value"></span>
<span ng-switch-default></span>
</div>

or

<span data-toggle="dropdown" ng-if="expression"></span>
<span ng-if="!expression"></span>

You can also create a directive for that same purpose (adding/removing attrs conditionally) but that would be a bit more complicated.

Additionally if what you want is manage the scope variable inside the directive you can pass it as another attribute.

Example:

<span data-toggle="dropdown" when="isDropDown"></span>

edited Feb 26, 2014 at 21:51

answered Feb 26, 2014 at 19:41

Wawy

6,2692 gold badges26 silver badges24 bronze badges

Collectives™ on Stack Overflow

Conditionally adding data-attribute in Angular directive template

3 Answers 3

5 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related