javascript - bootstrap btn-group 中的 angularjs 切换类

Question

我有一组按钮:

<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-click 函数，如下所示:

$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”按钮。

我对 angularjs 非常陌生，所以我不知道如何做到这一点，并且我想抵制用 jQuery 来增强任何东西:)

Answer 1

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

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