在angularJS中如何让bootstrap的按钮组实现排他事件呢？

Question

点击不同的按钮，则当前按钮的背景色发生改变，其他的按钮变成白色，这样的事件很容易实现的，但是放在angular中却不起效，获取不到类，请大神指点。代码如下：

                        <div class="btn-group">

                            <button type="button" class="btn btn-default btn-sty active" ng-click="load(1)">今日</button>

                            <button type="button" class="btn btn-default btn-sty" ng-click="load(2)">昨日</button>

                            <button type="button" class="btn btn-default btn-sty" ng-click="load(3)">本月</button>

                        </div>

JQ实现如下：

$(function () {

    $(".btn-sty").click(function () {

        // console.log($(this),1)

        $(this).addClass('active').siblings().removeClass('active');

    });

})

Answer 1

ng-class来控制样式<button type="button" class="btn btn-default btn-sty" ng-class="{'active': index === 1}" ng-click="load(1)">今日</button><button type="button" class="btn btn-default btn-sty" ng-class="{'active': index === 2}" ng-click="load(2)">昨日</button><button type="button" class="btn btn-default btn-sty" ng-class="{'active': index === 3}" ng-click="load(3)">本月</button>ctrl中$scope.load&nbsp;=&nbsp;function(num)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;$scope.index&nbsp;=&nbsp;num;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;...}