angularjs - Angular Bootstrap 单击时更改按钮颜色

Question

我有以下内容

<button type="button" class="btn btn-default" ng-click="showMoreFunc('academic')" >Academic</button>
<button type="button" class="btn btn-default" ng-click="showMoreFunc('appliedsciences')" >Applied Sciences</button>

当我们点击 + 符号时，它会显示一个带有 2 个按钮的面板。这些按钮设置为默认。但我想要一个函数，每当单击(事件)时将按钮设置为主要，并在未单击时返回默认值或单击另一个按钮。

如何实现此功能？

Answer 1

只需使用 ng-class 以及您已设置的变量来切换显示:

<button type="button" ng-class="{'btn-primary': display.academic}" ng-click="showMoreFunc('academic')" >Academic</button>
<button type="button" ng-class="{'btn-primary': display.appliedsciences}" ng-click="showMoreFunc('appliedsciences')" >Applied Sciences</button>

这是一个工作演示:http://plnkr.co/edit/cAqxxmaS7pjfhfSgCsWL?p=preview

注意:我尝试合并 showMoreFunc 函数中的一些逻辑。我认为这可行，但您的原始代码与 ng-class 完美配合:

$scope.showMoreFunc = function(view) {
  $scope.display.appliedsciences = (view == "appliedsciences" && !$scope.display.appliedsciences);
  $scope.display.academic = (view == "academic" && !$scope.display.academic);
}