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

Question

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

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

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 = function(num) {
    $scope.index = num;
    // ...
}

Answer 2

本人也用JQUERY实现了，代码如下：

                    <p class="btn-group">
                        <button type="button" class="btn btn-default active" onclick="btnClick(this)"  ng-click="load(1)">今日</button>
                        <button type="button" class="btn btn-default" onclick="btnClick(this)"  ng-click="load(2)">昨日</button>
                        <button type="button" class="btn btn-default" onclick="btnClick(this)" ng-click="load(3)">本月</button>
                    </p>
                    
  function btnClick(e) {
$(e).click(function () {
    console.log($(this), 1)
    $(this).addClass('active').siblings().removeClass('active');
});

}