javascript - 如何更改选定按钮的样式(禁用其他按钮)

Question

点击后如何使用 AngularJS 更改按钮的样式
我知道我应该使用 ng-class，但我不知道它的脚本是什么。
看看这个fiddle
单击后，删除 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

检查这个 fiddle :http://jsfiddle.net/HB7LU/15183/

HTML:

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

Controller :

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

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