adicionando e removendo classs em angularJs usando ng-click

Eu estou tentando trabalhar como adicionar uma class com o ngClick. Eu carreguei meu código no plunker Clique aqui . Olhando para a documentação angular, não consigo descobrir o caminho exato que deve ser feito. Abaixo está um trecho do meu código. Alguém pode me guiar na direção certa

Controlador

 var app = angular.module("MyApp", []); app.controller("subNavController", function ($scope){ $scope.toggle = function (){ $scope.isVisible = ! $scope.isVisible; }; $scope.isVisible = false; }); 

Você só precisa ligar uma variável na diretiva “ng-class” e alterá-la do controlador. Aqui está um exemplo de como fazer isso:

 var app = angular.module("ap",[]); app.controller("con",function($scope){ $scope.class = "red"; $scope.changeClass = function(){ if ($scope.class === "red") $scope.class = "blue"; else $scope.class = "red"; }; }); 
 .red{ color:red; } .blue{ color:blue; } 
   
{{class}}

Eu quero adicionar ou remover a class ” active ” no meu código dinamicamente em ng-click , aqui o que eu fiz.

  

Existe uma maneira simples e limpa de fazer isso com apenas diretivas.

 

Você tem tudo exatamente certo, tudo que você precisa fazer é definir o selectedindex em seu ng-click.

 ng-click="selectedIndex = 1" 

Aqui está como eu implementei um conjunto de botões que mudam a visão geral e realça o botão da visão atualmente selecionada.

  

e isso no meu controlador.

 $scope.router = function(endpoint) { $location.path("/" + ($scope.partial = endpoint)); }; 

você também pode fazer isso em uma diretiva, se você quiser remover a class anterior e adicionar uma nova class

  .directive('toggleClass', function() { return { restrict: 'A', link: function(scope, element, attrs) { element.bind('click', function() { if(element.attr("class") == "glyphicon glyphicon-pencil") { element.removeClass("glyphicon glyphicon-pencil"); element.addClass(attrs.toggleClass); } else { element.removeClass("glyphicon glyphicon-ok"); element.addClass("glyphicon glyphicon-pencil"); } }); } }; }); 

e no seu modelo:

  
 var app = angular.module("MyApp", []); app.controller("subNavController", function ($scope){ $scope.toggle = function (){ $scope.isVisible = ! $scope.isVisible; }; $scope.isVisible = false; }); 
 

Eu usei a sugestão de Zack Argyle acima para conseguir isso, o que eu acho muito elegante:

CSS:

 .active { background-position: 0 -46px !important; } 

HTML:

      

Se você preferir a separação de interesses de modo que a lógica para adicionar e remover classs ocorra no controlador, você pode fazer isso

controlador

  (function() { angular.module('MyApp', []).controller('MyController', MyController); function MyController() { var vm = this; vm.tab = 0; vm.setTab = function(val) { vm.tab = val; }; vm.toggleClass = function(val) { return val === vm.tab; }; } })(); 

HTML

 
  • One
  • Two
  • Three
  • Four

CSS

 .highlighted { background-color: green; color: white; } 

Eu não posso acreditar o quão complexo todo mundo está fazendo isso. Isso é realmente muito simples. Apenas cole isso no seu html (sem alterações no directive./controller necessárias – “bg-info” é uma class de bootstrap):

 
CARS
TRAINS
PLANES

para formas reativas –

Arquivo HTML