CODEWITHSUNDEEP
javascriptangularjsionic-framework
Omid Jackson
Omid Jackson

Reputation: 33

How to change selected button style (disable the others)

How could I change style of button with AngularJS after click
I knew I should use ng-class, but I didn't know what is the script of this.
Look at this fiddle
After click, remove selectedButton and add this class to that button we clicked!

<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;
}

Upvotes: 0

Views: 188

Answers (3)

Bipin Bhandari
Bipin Bhandari

Reputation: 2692

This could also be the possible solution.

<!-- 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>

Hope it helps!

Upvotes: 0

Johnny Ha
Johnny Ha

Reputation: 633

You could use ng-class with ng-disabled.

Check this fiddle: http://jsfiddle.net/ejy5o5fm/

$scope.selected = 0;

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

Upvotes: 0

Fissio
Fissio

Reputation: 3758

Check this fiddle: http://jsfiddle.net/HB7LU/15183/

HTML:

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

Controller:

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

Here I have some custom behavior to change the active button, but the core idea here is that you'll want to have a classYouWant: booleanExpression pair in the object you pass to ng-class. Just change the isSelected function and its argument to suit your needs.

Upvotes: 1

Related Questions