angularjsは、私はボタンのグループを持っている

Question

BTN-グループのブートストラップでクラスを切り替える：

このよう

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

とngのクリック機能：

$scope.filter_emails = function(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); 
    } 
} 

私が達成しようとしています必要な動作がありますクリックしたボタンに 'btn-primary'を追加する/ 'btn-outline-primary'を削除し、 'btn-outline'を追加する/以前に選択したボタンから 'btn-primary'を削除する。

私はのようにあなたの方法を更新するので、私はこれを行う方法がわからないと私はあなたがクリックされたボタンを格納することで、簡単にこれを行うことができますjQueryの:)

Answer 1

を使って何を増強抵抗したいangularjsする新しいかわいいブランド午前

$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には、あなたは単に

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

Answer 2

ディレクティブとPuを作成し、それに応じてクラスを更新するためにng-classを使用あなたのHTML

HTML私newbienessを示す

<div class="btn-group"> 


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

Javascriptを

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