javascript - event - agregar y eliminar clases en angularJs usando ng-click

onclick angular 4

Question

Estoy tratando de trabajar para agregar una clase con ngClick. He subido mi código en Plunker Haga clic aquí . Mirando la documentación angular no puedo entender la forma exacta en que debería hacerse. A continuación hay un fragmento de mi código. ¿Alguien puede guiarme en la dirección correcta?

 <div ng-show="isVisible" ng-class="{''selected'': $index==selectedIndex}" class="block"></div>

Controlador

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

Answer 1

Hay una forma simple y limpia de hacerlo con solo directivas.

<div ng-class="{''class-name'': clicked}" ng-click="clicked = !clicked"></div>

Answer 2

Lo tienes exactamente, todo lo que tienes que hacer es establecer selectedIndex en tu ng-clic.

ng-click="selectedIndex = 1"

Aquí es cómo implementé un conjunto de botones que cambian la vista ng, y resalta el botón de la vista seleccionada actualmente.

<div id="sidebar" ng-init="partial = ''main''">
<div class="routeBtn" ng-class="{selected:partial==''main''}" ng-click="router(''main'')"><span>Main</span></div>
<div class="routeBtn" ng-class="{selected:partial==''view1''}" ng-click="router(''view1'')"><span>Resume</span></div>
<div class="routeBtn" ng-class="{selected:partial==''view2''}" ng-click="router(''view2'')"><span>Code</span></div>
<div class="routeBtn" ng-class="{selected:partial==''view3''}" ng-click="router(''view3'')"><span>Game</span></div>
</div>

y esto en mi controlador.

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

Answer 3

No puedo creer lo complejo que todos están haciendo esto. Esto es realmente muy simple. Simplemente pegue esto en su html (no se requieren cambios en la directiva ni en el controlador - "bg-info" es una clase de arranque):

<div class="form-group col-md-12">
<div ng-class="{''bg-info'': (!transport_type)}" ng-click="transport_type=false">CARS</div>
<div ng-class="{''bg-info'': transport_type==''TRAINS''}" ng-click="transport_type=''TRAINS''">TRAINS</div>
<div ng-class="{''bg-info'': transport_type==''PLANES''}" ng-click="transport_type=''PLANES''">PLANES</div>
</div>

Answer 4

Quiero agregar o eliminar active clase " active " en mi código de forma dinámica en ng-click , aquí lo que he hecho.

<ul ng-init="selectedTab = ''users''">
<li ng-class="{''active'':selectedTab === ''users''}" ng-click="selectedTab = ''users''"><a href="#users" >Users</a></li>
<li ng-class="{''active'':selectedTab === ''items''}" ng-click="selectedTab = ''items''"><a href="#items" >Items</a></li>
</ul>

Answer 5

Si prefiere separar las preocupaciones de tal manera que la lógica para agregar y eliminar clases ocurra en el controlador, puede hacer esto

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

<div ng-app="MyApp">
<ul class="" ng-controller="MyController as myCtrl">
<li ng-click="myCtrl.setTab(0)" ng-class="{''highlighted'':myCtrl.toggleClass(0)}">One</li>
<li ng-click="myCtrl.setTab(1)" ng-class="{''highlighted'':myCtrl.toggleClass(1)}">Two</li>
<li ng-click="myCtrl.setTab(2)" ng-class="{''highlighted'':myCtrl.toggleClass(2)}">Three</li>
<li ng-click="myCtrl.setTab(3)" ng-class="{''highlighted'':myCtrl.toggleClass(3)}">Four</li>
</ul>

CSS

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

Answer 6

Solo necesita vincular una variable en la directiva "ng-class" y cambiarla del controlador. Aquí hay un ejemplo de cómo hacer esto:

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

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="ap" ng-controller="con">
<div ng-class="class">{{class}}</div>
<button ng-click="changeClass()">Change Class</button>
</body>

Aquí está el ejemplo trabajando en jsFiddle

Answer 7

Utilicé la sugerencia de Zack Argyle anterior para obtener esto, que me parece muy elegante:

CSS:

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

HTML:

<button ng-click="satisfaction = ''VeryHappy''" ng-class="{active:satisfaction == ''VeryHappy''}">
<img src="images/VeryHappy.png" style="height:24px;" />
</button>
<button ng-click="satisfaction = ''Happy''" ng-class="{active:satisfaction == ''Happy''}">
<img src="images/Happy.png" style="height:24px;" />
</button>
<button ng-click="satisfaction = ''Indifferent''" ng-class="{active:satisfaction == ''Indifferent''}">
<img src="images/Indifferent.png" style="height:24px;" />
</button>
<button ng-click="satisfaction = ''Unhappy''" ng-class="{active:satisfaction == ''Unhappy''}">
<img src="images/Unhappy.png" style="height:24px;" />
</button>
<button ng-click="satisfaction = ''VeryUnhappy''" ng-class="{active:satisfaction == ''VeryUnhappy''}">
<img src="images/VeryUnhappy.png" style="height:24px;" />
</button>

Answer 8

también puede hacerlo en una directiva, si desea eliminar la clase anterior y agregar una nueva clase

 .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");
}
});
}
};
});

y en tu plantilla:

<i class="glyphicon glyphicon-pencil" toggle-class="glyphicon glyphicon-ok"></i>

Answer 9

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

<div ng-show="isVisible" ng-class="{''active'':isVisible}" class="block"></div>