Comment pourrais-je changer le style du bouton avec AngularJS après avoir cliqué
Je savais que je devrais utiliser ng-class, mais je ne savais pas quel est le script de cela.
Regardez ce violon
Après avoir cliqué, supprimez selectedButton et ajoutez cette classe à ce bouton sur lequel nous avons cliqué!

<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;
}
0
Omid Jackson 13 juil. 2015 à 09:44

3 réponses

Meilleure réponse

Vérifiez ce violon: http://jsfiddle.net/HB7LU/15183/

HTML:

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

Manette:

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

Ici, j'ai un comportement personnalisé pour changer le bouton actif, mais l'idée principale ici est que vous voudrez avoir une paire classYouWant: booleanExpression dans l'objet que vous passez à ng-class. Modifiez simplement la fonction isSelected et son argument selon vos besoins.

1
Fissio 13 juil. 2015 à 06:59

Cela pourrait également être la solution possible.

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

J'espère que cela aide!

0
Bipin Bhandari 13 juil. 2015 à 07:02

Vous pouvez utiliser ng-class avec ng-disabled.

Vérifiez ce violon: http://jsfiddle.net/ejy5o5fm/

$scope.selected = 0;

$scope.toogleSeclected = function(id){
   if($scope.selected === id) {
     $scope.selected = 0;
   } else {
     $scope.selected = id;
   }
};
0
Johnny Ha 13 juil. 2015 à 07:02