Как изменить выбранный стиль кнопки (отключить остальные)

Question

Как я могу изменить стиль кнопки с помощью AngularJS после щелчка
Я знал, что должен использовать ng-класс, но я не знал, что это за сценарий этого.
Посмотрите на это 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; 
}; 

Здесь у меня есть некоторые пользовательские поведения, чтобы изменить активную кнопку, но основную идею вот что вы хотите иметь пару classYouWant: booleanExpression в объекте вы переходите к ng-классу. Просто измените функцию isSelected и ее аргумент в соответствии с вашими потребностями.

Answer 2

Вы можете использовать ng-класс с 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> 

Надеюсь, это поможет!