基于angularJs点击的活动类

时间:2015-03-04 14:23:53

标签: angularjs

可以根据点击添加活动类 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>

1 个答案:

答案 0 :(得分:1)

您需要将按钮更新为以下内容:

<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>

当$ scope.add为true时,它会将活动类应用于具有

的元素
ng-class="{'active':add}"

你的liveHint函数中的

将$ scope.add设置为true,如下所示:

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;
        }
    }

});