twitter-bootstrap 单击时角度引导程序更改按钮颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23255312/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular bootstrap change button colors on click
提问by Abhishek
I have the following
我有以下
<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>
When we click on the +sign, it gives me a panel with 2 buttons. These buttons are set to default. But i want to have a function that sets the button to primarywhenever clicked(active), and go back to default when it is unclickedor another button is clicked.
当我们点击+号时，它会给我一个带有 2 个按钮的面板。这些按钮设置为默认值。但我想有一个功能，将按钮设置为初级每当clicked（活动），并返回到默认值时，它是unclicked或另一个按钮被点击。
How do i achieve this functionality?
我如何实现这个功能？
回答by j.wittwer
Just use ng-class, along with the variables you are already setting to toggle display:
只需使用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>
Here is a working demo: http://plnkr.co/edit/cAqxxmaS7pjfhfSgCsWL?p=preview
这是一个工作演示：http: //plnkr.co/edit/cAqxxmaS7pjfhfSgCsWL?p=preview
Note: I took a shot at consolidating some of the logic in the showMoreFuncfunction. I think this works, but your original code worked perfectly well with ng-class:
注意：我尝试合并showMoreFunc函数中的一些逻辑。我认为这有效，但您的原始代码与ng-class以下内容完美配合：
$scope.showMoreFunc = function(view) {
$scope.display.appliedsciences = (view == "appliedsciences" && !$scope.display.appliedsciences);
$scope.display.academic = (view == "academic" && !$scope.display.academic);
}
回答by Tim
Using the Buttons (Radio) from http://angular-ui.github.io/bootstrap/:
使用来自http://angular-ui.github.io/bootstrap/的按钮（收音机）：
Change
改变
<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>
to
到
<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>
and in your controller add
并在您的控制器中添加
$scope.radioModel = 'Left';
Result, if btn Academic is 'active'
结果，如果 btn Academic 是“活跃的”
and this if btn Applied Sciences is 'active'
如果 btn Applied Sciences 是“活跃的”
回答by Eric Chen
I think best way is using pure css to deal with this.
我认为最好的方法是使用纯 css 来处理这个问题。
.btn:focus{
outline: 0 !important;
}
.btn:active {
outline:0;
color: #fff;
background-color: #428bca;
border-color: #357ebd;
}
I wrote a simple plnkr demo with bootstrap 3.1, when you clicking default button, It will change to primary color.
我用 bootstrap 3.1 写了一个简单的 plnkr 演示，当你点击默认按钮时，它会变成原色。
回答by Ravi Sharma
This will work
这将工作
<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>
