CODEWITHSUNDEEP
angularjstwitter-bootstraptwitter-bootstrap-3
Ayush
Ayush

Reputation: 518

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

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

Upvotes: 1

Views: 2374

Answers (2)

Aditya Mantha
Aditya Mantha

Reputation: 81

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.

Upvotes: 2

Vinay K
Vinay K

Reputation: 5572

ng-class takes a json string as the argument.

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

Upvotes: 1

Related Questions