Angular.js: Conditionally add an element attribute

[adel-tahir14]

How can I add autoplay attribute to video tag based on the scope variable is_autoplay?

[lord2800]

ng-attr-autoplay="is_autoplay"?

[adel-tahir14]

thanks, but not working.

I confirmed that is_autoplay holds true, but autoplay attribute is not added.

[lord2800]

Hmm. You could make it via:

angular.module('autoplayAttribute', []).directive('autoplay',
    function () {
        return {
            link: function (scope, el, attrs) {
                scope.$watch(
                    function () { return attrs.autoplay; },
                    function (newVal) { attrs.$set('autoplay', newVal); }
                );
            }
        };
    });

Off the top of my head, and I'm sure there's something more optimal/minimal, but something like that should work...

[adel-tahir14]

Thanks!

[manar007]

but in any case ng-attr-something doesnt works :(

[gkalpak]

This works as expected since version 1.3.0-rc.0 (demo).

Note that ng-attr-something uses interpolation, so you need to wrap the expression in {{...}}.
In order for the attribute to be removed, (any sub-part of) the expression has to evaluate to undefined.

[manar007]

thanks

[petr0001]

This works for me ng-attr-myattribute="{{myBooleanCondition ? '' : undefined}}"

[Tronix117]

The following doesn't seems to work though

ng-attr-ui-sref="{{sref && sref + '(' + getParams(item) + ')' || undefined}}"
# Cannot read property 'match' of undefined

or

ng-attr-ui-sref="{{sref && sref + '(' + getParams(item) + ')' || 'undefined'}}"
# Could not resolve 'undefined' from state XXXX

ui-sref is always added even if the result of ng-attr-ui-sref is `undefined