active class based on click in angularJs

Question

is this possible to add active class based on click .
Fiddle

<button class="btn btn-twitter btn-left-icon" ng-class="{'active' : install}" type="button" ng-click="liveHint('install')">
    نصب جدید
</button>


<button type="button" class="btn btn-twitter btn-left-icon" ng-class="{'active' :add}" ng-click="liveHint('add')">
    ادغام
</button>
<button type="button" class="btn btn-twitter btn-left-icon" ng-class="{'active' :add}" ng-click="liveHint('add')">
    تفکیک

</button>

do you want to make button or buttons group active with click? — Poyraz Yilmaz
– Poyraz Yilmaz, Commented Mar 4, 2015 at 14:27
your question is not clear. do you want other button disabled. Can you give your full scenario? — Poyraz Yilmaz
– Poyraz Yilmaz, Commented Mar 4, 2015 at 14:50

nweg · Accepted Answer · 2015-03-04 14:47:16Z

1

You would need to update your buttons to the following:

<button type="button" class="btn btn-twitter btn-left-icon" ng-class="{'active' :add}" ng-click="add = true">
    ادغام
    <span class=" fa fa-plus" aria-hidden="true">
    </span>
</button>
<button type="button" class="btn btn-twitter btn-left-icon" ng-class="{'active' :add}" ng-click="add = true">
    تفکیک
    <span class=" fa fa-plus" aria-hidden="true">
    </span>
</button>

When $scope.add is true it will apply the active class to your elements that have

ng-class="{'active':add}"

or

in your liveHint function set $scope.add equal to true like this:

angular.module("CheckAllModule", [])
.controller("checkboxController", function checkboxController($scope) {
    $scope.add = false;
    $scope.install = false;

    $scope.liveHint = function (mode) {
    if (mode == 'add')
    {
        $scope.add = !$scope.add;
    }
        else if (mode == 'install')
        {
            $scope.install = !$scope.install;
        }
    }

});

edited Mar 4, 2015 at 14:47

answered Mar 4, 2015 at 14:28

nweg

2,8753 gold badges25 silver badges31 bronze badges

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

1 Comment

nweg Over a year ago

You can set it in the view or controller. You probably want to do it in the controller by modifying your liveHint function if you need to do other logic when the buttons are clicked.

Collectives™ on Stack Overflow

active class based on click in angularJs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related