Change Twitter Bootstrap button status to active in Button Group with AngularJS

Question

I'm trying to set the status of a button to active based on the value of "OrderBy" with no results, I've tried all the Q/A in stackoverflow.

    <div class="btn-group col-md-offset-5" style="right: 12px !important;">
        <label class="btn btn-default" ng-class="'active':orderProp=='name'">
            <input type="radio" name="color" data-ng-model="orderProp" value="name"> Alphabetical
        </label>
        <label class="btn btn-default" ng-class="'active':orderProp=='price'">
            <input type="radio" name="color" data-ng-model="orderProp" value="price"> Price
        </label>
        <label class="btn btn-default" ng-class="'active':orderProp=='calorie'">
            <input type="radio" name="color" data-ng-model="orderProp" value="calorie"> Calorie
        </label>{{orderProp}}
    </div>

The value of orderProp is changing accordingly but dunno why the active class is not being applied. Thanks

Aditya Mantha · Accepted Answer · 2016-01-06 10:45:12Z

2

Try this ng-class = "{'active' : (orderProp=='name')}"

The directive operates in three different ways, depending on which of three types the expression evaluates to:

If the expression evaluates to a string, the string should be one or more space-delimited class names.

If the expression evaluates to an object, then for each key-value pair of the object with a truthy value the corresponding key is used as a class name.

If the expression evaluates to an array, each element of the array should either be a string as in type 1 or an object as in type 2. This means that you can mix strings and objects together in an array to give you more control over what CSS classes appear.

edited Jan 6, 2016 at 10:45

answered Mar 26, 2015 at 11:50

Aditya Mantha

814 bronze badges

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

3 Comments

A.L Over a year ago

Why should anyone try this code? What does this code do? Please add an explanation in the answer.

Ayush Over a year ago

Thank You..Worked on first hit..can you please explain the difference?

Not The Real Hemingway Over a year ago

Thanks a lot. That also helped me to solve my problem.

Vinay K · Accepted Answer · 2015-03-26 11:23:04Z

1

ng-class takes a json string as the argument.

Try this - ng-class="{'active':orderProp=='name'}"

answered Mar 26, 2015 at 11:23

Vinay K

5,5721 gold badge20 silver badges27 bronze badges

Collectives™ on Stack Overflow

Change Twitter Bootstrap button status to active in Button Group with AngularJS

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related