单击角度引导更改按钮颜色

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个按钮的面板。这些按钮设置为默认。但是我希望有一个功能，只要clicked（活动），按钮就会将按钮设置为主要，并在单击unclicked或其他按钮时返回默认值。

我如何实现此功能？

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

Answer 2

使用http://angular-ui.github.io/bootstrap/中的按钮（收音机）：

更改

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

到

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

并在控制器中添加

$scope.radioModel = 'Left';

结果，如果btn学术是“活跃的”

如果btn应用科学是“活跃的”

Answer 3

我认为最好的方法是使用纯css来解决这个问题。

.btn:focus{
  outline: 0 !important;  
}
.btn:active  {
  outline:0;
  color: #fff;
  background-color: #428bca;
  border-color: #357ebd;
}

我用bootstrap 3.1写了一个简单的plnkr演示，当你点击默认按钮时，它会变成原色。

结帐http://plnkr.co/edit/KJR8xL?p=preview

Answer 4

这将有效

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