web-dev-qa-db-fra.com

Changer de classe dans angularjs via le contrôleur

Veuillez m'aider à changer la classe d'entrée [type = bouton] dynamiquement en utilisant angularjs et controller.

app.controller('anodekeypadcntrl',function($scope){
        
        
        $scope.clickTwentyFour = function(event){
          In this function I need to highlight the button (adding the .active class to it)      
        };
                                    
});
<div class="keypadcontainer" ng-controller="anodekeypadcntrl as child">
  ------
  <input type="button" value="24" id="twentyFour" class="twentyfour anodeKeypadButton"
        ng-click="clickTwentyFour($event)" />
  -------------
</div>
htmlcssangularjstwitter-bootstrap
10
Anusha Sajeendran

Vous pouvez utiliser ngClass pour cela. Dans votre balisage, faites simplement quelque chose comme:

<input type="button" value="24" id="twentyFour" class="twentyfour anodeKeypadButton"
ng-click="clickTwentyFour($event)" ng-class="myDynamicClass" />

De cette façon, vous pouvez définir myDynamicClass comme une chaîne unique contenant une classe CSS ou un tableau de chaînes directement depuis votre contrôleur

// controller code
$scope.myDynamicClass = 'some-css-class';

Cela sera ajouté au HTML. Si vous regardez les documents ngClass vous verrez que vous pouvez même attacher des fonctions qui retournent une classe, ou écrire les classes directement dans le HTML avec des conditions attachées.

16
Dan Moldovan

Si vous souhaitez ajouter une classe, essayez ceci:

var myEl = angular.element( document.querySelector( '#twentyFour' ) );
myEl.addClass('active');

vous pouvez remplacer les éléments du querySelector par votre identifiant requis.

5
Deepak Mani

Vous pouvez utiliser ng-class pour ajouter dynamiquement une classe à votre bouton divou ou autre

Voici un plongeur fonctionnel avec votre code

http://embed.plnkr.co/rzS8GV975BHRk83xhsPx/preview

J'espère que cela t'aides

2
Alhuck A