Javascript 引导btn组中的angularjs切换类

我有一组按钮：

<div class="btn-group">
    <button class="btn btn-primary" ng-click="filter_emails()"><span class="ion-home mr-2"></span>All</button>
    <button class="btn btn-outline-primary" ng-click="filter_emails('new')"><span class="ion-plus-circled mr-2"></span>New</button>
    <button class="btn btn-outline-primary" ng-click="filter_emails('inbox')"><span class="ion-archive mr-2"></span>Inbox</button>
    <button class="btn btn-outline-primary" ng-click="filter_emails('shielded')"><span class="ion-paper-airplane align-middle mr-2"></span>Shielded</button>
</div>

我试图实现的理想行为是在单击的按钮上添加'btn primary'/删除'btn outline primary'，并从先前选择的按钮中添加'btn outline'/删除'btn primary'

---

我是angularjs的新手，所以我不知道如何做到这一点，我想抵制使用jQuery增加任何内容：）

您可以通过存储单击的按钮轻松做到这一点，更新您的方法，如

$scope.filter_emails = function(category) {
    $scope.selectedButton = category;
    if (category === "inbox") {
        $scope.grouped = group(inbox($scope.emails));
    } else if (category === "shielded") {
        $scope.grouped = group(shield($scope.emails));
    } else if (category === "new") {
        $scope.grouped = group(is_new($scope.emails));
    } else {
        $scope.grouped = group($scope.emails);
    }
}

在html中，只需使用

ng class

相应地更新类

<div class="btn-group">
    <button class="btn" ng-class={'btn-primary': !selectedButton, 'btn-outline-primary': selectedButton} ng-click="filter_emails()"><span class="ion-home mr-2"></span>All</button>
    <button class="btn" ng-class={'btn-primary': selectedButton === 'new', 'btn-outline-primary': selectedButton !== 'new'} ng-click="filter_emails('new')"><span class="ion-plus-circled mr-2"></span>New</button>
    <button class="btn" ng-class={'btn-primary': selectedButton === 'inbox', 'btn-outline-primary': selectedButton !== 'inbox'} ng-click="filter_emails('inbox')"><span class="ion-archive mr-2"></span>Inbox</button>
    <button class="btn" ng-class={'btn-primary': selectedButton === 'shielded', 'btn-outline-primary': selectedButton !== 'shielded'} ng-click="filter_emails('shielded')"><span class="ion-paper-airplane align-middle mr-2"></span>Shielded</button>
</div>

全部的
新的
收件箱
屏蔽

您可以通过存储单击的按钮轻松完成此操作，如

$scope.filter_emails = function(category) {
    $scope.selectedButton = category;
    if (category === "inbox") {
        $scope.grouped = group(inbox($scope.emails));
    } else if (category === "shielded") {
        $scope.grouped = group(shield($scope.emails));
    } else if (category === "new") {
        $scope.grouped = group(is_new($scope.emails));
    } else {
        $scope.grouped = group($scope.emails);
    }
}

在html中，只需使用

ng class

相应地更新类

<div class="btn-group">
    <button class="btn" ng-class={'btn-primary': !selectedButton, 'btn-outline-primary': selectedButton} ng-click="filter_emails()"><span class="ion-home mr-2"></span>All</button>
    <button class="btn" ng-class={'btn-primary': selectedButton === 'new', 'btn-outline-primary': selectedButton !== 'new'} ng-click="filter_emails('new')"><span class="ion-plus-circled mr-2"></span>New</button>
    <button class="btn" ng-class={'btn-primary': selectedButton === 'inbox', 'btn-outline-primary': selectedButton !== 'inbox'} ng-click="filter_emails('inbox')"><span class="ion-archive mr-2"></span>Inbox</button>
    <button class="btn" ng-class={'btn-primary': selectedButton === 'shielded', 'btn-outline-primary': selectedButton !== 'shielded'} ng-click="filter_emails('shielded')"><span class="ion-paper-airplane align-middle mr-2"></span>Shielded</button>
</div>

全部的
新的
收件箱
屏蔽

创建一个指令并将其放入HTML中

HTML

---

创建一个指令并将其放入HTML中

HTML

---

给我的新朋友看，我正试着从控制器上做这件事@如果他们解决了这个问题，SavaRayVelf考虑接受我的答案或其他答案。？有什么猜测吗？这算是可行的。它正在添加类，但没有从同级中删除。@SandraWillford尝试从

.silbings（'button'）中删除
'button'
）如果在<代码> div <代码中没有其他兄弟姐妹显示我的新手，我试图从控制器那里做这个！@桑德拉福德考虑接受我的答案或其他答案，如果他们解决了问题。？有什么猜测吗？这算是起作用了。它正在添加类，但没有从同级中删除。@SandraWillford尝试从
.silbings（'button'）
中删除
.silbings（'button'）
yourApp.directive('getSiblings', function() {
   return {
      scope: true,
      link: function(scope,element,attrs){
        element.bind('click', function() {
            element.addClass('btn-primary');
            element.removeClass('btn-outline-primary');
            element.siblings('button').addClass('btn-outline');               
            element.siblings('button').removeClass('btn-primary');               
         }
      }
   }
});