如何更改所选按钮的样式（禁用其他样式）

Question

单击后如何使用AngularJS更改按钮样式
我知道我应该使用ng-class，但是我不知道它的脚本是什么。
看这个小提琴
单击后，删除selectedButton并将此类添加到我们单击的按钮中！

<button class="buttons selectedButton">button 1</button>
<button class="buttons">button 2</button>
<button class="buttons">button 3</button>
<button class="buttons">button 4</button>


.buttons {
    float: left !important;
    background-color: #4c4c4c;
    width: 100px;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-right: none;
    border-bottom: 3px solid #4C4C4C;
    color: #fff;
    font-size: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    min-height: auto;
    border-radius: 5px;
    padding: 10px;
    height: 100%;
    font-size: 14px;
    border-top: none;
    border-left: none;
    margin: 5px;
    cursor: pointer;
}
.selectedButton {
    border-bottom: 3px solid #d2ac67;
    color: #d2ac67;
}

Answer 1

检查此小提琴： http : //jsfiddle.net/HB7LU/15183/

HTML：

ng-class="{buttonSelected: isSelected($index)}"

控制器：

$scope.isSelected = function($index) {
    return $scope.selectedButton === $index;
};

在这里，我有一些自定义行为来更改活动按钮，但是这里的核心思想是，您要在传递给ng-class的对象中具有classYouWant: booleanExpression对。 只需更改isSelected函数及其参数即可满足您的需求。

Answer 2

您可以将ng-class与ng-disabled一起使用。

检查此小提琴： http : //jsfiddle.net/ejy5o5fm/

$scope.selected = 0;

$scope.toogleSeclected = function(id){
   if($scope.selected === id) {
     $scope.selected = 0;
   } else {
     $scope.selected = id;
   }
};

Answer 3

这也可能是解决方案。

<!-- Set value of the button you want to be preselected -->
<div ng-init="clickedButton = 'button1'">
<button ng-class="{'selectedButton':clickedButton === 'button1'}" ng-click="clickedButton = 'button1'">Button 1</button>
<button ng-class="{'selectedButton':clickedButton === 'button2'}" ng-click="clickedButton = 'button2'">Button 2</button>
</div>

希望能帮助到你！