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

检查这个小提琴：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/

ArrayList

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>

希望它有所帮助！

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

3 个答案: