angular ng-class with two classes, one from a variable name and one with condition

Question

I a m a little stuck with a problem, probably some syntax I can't find on the internet.

I created an angular directive that receives a class name as a scope variable. In the tamplate I want to add the given classname and another class as conditional. something like that:

app.directive('MyDirective', function () {
    return {
        restrict: 'E',
        scope: {
            className: '=',
        },
        template: "<div ng-class="className, 'otherClass':{expression}"></div>"
    }
});

Thanks :)

PSL · Accepted Answer · 2015-10-30 19:04:26Z

3

Assuming className is a property on the scope:

You could make use of array expression with object literal syntax itself.

 <div ... ng-class="[className, {true : 'otherClass'}[expression]]"

or mix it with class

<div ... class="{{className}}" ng-class="{'otherClass': expression}"

edited Oct 30, 2015 at 19:04

answered Oct 30, 2015 at 18:16

PSL

124k21 gold badges257 silver badges243 bronze badges

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

Comments

Mohammad tanvirul islam · Accepted Answer · 2015-10-30 18:17:42Z

0

change your code like this
    app.directive('MyDirective', function () {
    return {
        restrict: 'E',
        scope: {
            className: '=',
        },
        template: "<div ng-class="'className':true, 'otherClass':    {expression}"></div>"
    }
    });

answered Oct 30, 2015 at 18:17

Mohammad tanvirul islam

5017 silver badges19 bronze badges

Comments

Rafael Mih · Accepted Answer · 2015-10-30 18:24:34Z

0

You can use by your scope data with some condition or expression.

<div ng-class="{'{{item.name}}' : item.condition}">

or

<div ng-class="$variableToEvaluate ? '{{item.nameiftrue}}' : '{{item.nameiffalse}}'">

answered Oct 30, 2015 at 18:24

Rafael Mih

639 bronze badges

Collectives™ on Stack Overflow

angular ng-class with two classes, one from a variable name and one with condition

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related