angularjs - multiple - Añadiendo múltiples clases usando ng-class
ngclass angular 6 (11)
¿Podemos tener expresiones múltiples para agregar varias clases ng?
por ej.
<div ng-class="{class1: expressionData1, class2: expressionData2}"></div>
Si es así, ¿alguien puede poner el ejemplo para hacerlo?
.
Aquí hay un ejemplo que compara varios estados de enrutador ui angular utilizando el OR || operador:
<li ng-class="
{
warning:
$state.includes(''out.pay.code.wrong'')
|| $state.includes(''out.pay.failed'')
,
active:
$state.includes(''out.pay'')
}
">
Le dará a la li las clases advertencia y / o activa, dependiendo de si se cumplen las condiciones.
Con multiples condiciones
<div ng-class="{''class1'' : con1 || can2, ''class2'' : con3 && con4}">
Hello World!
</div>
Debajo de active y activemenu están las clases y itemCount y ShowCart es expresión / valores booleanos.
ng-class="{''active'' : itemCount, ''activemenu'' : showCart}"
Encontrado de otra manera gracias a Scotch.io
<div ng-repeat="step in steps" class="step-container step" ng-class="[step.status, step.type]" ng-click="onClick(step.type)">
Esta fue mi referencia. https://scotch.io/tutorials/the-many-ways-to-use-ngclass
Otra forma en que podemos crear una función para controlar "usando clases múltiples"
CSS
<style>
.Red {
color: Red;
}
.Yellow {
color: Yellow;
}
.Blue {
color: Blue;
}
.Green {
color: Green;
}
.Gray {
color: Gray;
}
.b {
font-weight: bold;
}
</style>
Guión
<script>
angular.module(''myapp'', [])
.controller(''ExampleController'', [''$scope'', function ($scope) {
$scope.MyColors = [''It is Red'', ''It is Yellow'', ''It is Blue'', ''It is Green'', ''It is Gray''];
$scope.getClass = function (strValue) {
if (strValue == ("It is Red"))
return "Red";
else if (strValue == ("It is Yellow"))
return "Yellow";
else if (strValue == ("It is Blue"))
return "Blue";
else if (strValue == ("It is Green"))
return "Green";
else if (strValue == ("It is Gray"))
return "Gray";
}
}]);
</script>
Usandolo
<body ng-app="myapp" ng-controller="ExampleController">
<h2>AngularJS ng-class if example</h2>
<ul >
<li ng-repeat="icolor in MyColors" >
<p ng-class="[getClass(icolor), ''b'']">{{icolor}}</p>
</li>
</ul>
Puede consultar la página de códigos completa en ng-class si el ejemplo
Para aplicar diferentes clases cuando diferentes expresiones se evalúan como true :
<div ng-class="{class1 : expression1, class2 : expression2}">
Hello World!
</div>
Para aplicar varias clases cuando una expresión es verdadera:
<!-- notice expression1 used twice -->
<div ng-class="{class1 : expression1, class2 : expression1}">
Hello World!
</div>
o simplemente:
<div ng-class="{''class1 class2'' : expression1}">
Hello World!
</div>
Observe las comillas simples que rodean las clases css
Para la notación del operador ternario:
<div ng-class="expression1? ''class1 class2'' : ''class3 class4''">
Sí, puede tener varias expresiones para agregar varias clases en ng-class.
Por ejemplo:
<div ng-class="{class1:Result.length==2,class2:Result.length==3}"> Dummy Data </div>
Su ejemplo funciona para clases condicionadas (el nombre de la clase se mostrará si el expressionDataX es verdadero):
<div ng-class="{class1: expressionData1, class2: expressionData2}"></div>
También puede agregar varias clases, proporcionadas por el usuario del elemento:
<div ng-class="[class1, class2]"></div>
Uso:
<div class="foo bar" class1="foo" class2="bar"></div>
Usando un método de $scope en el controlador, puede calcular qué clases generar en la vista. Esto es especialmente útil si tiene una lógica compleja para calcular los nombres de clase y reducirá la cantidad de lógica en su vista moviéndola al controlador:
app.controller(''myController'', function($scope) {
$scope.className = function() {
var className = ''initClass'';
if (condition1())
className += '' class1'';
if (condition2())
className += '' class2'';
return className;
};
});
y en la vista, simplemente:
<div ng-class="className()"></div>
Una alternativa increíblemente poderosa a otras respuestas aquí:
ng-class="[ { key: resulting-class-expression }[ key-matching-expression ], .. ]"
Algunos ejemplos:
1. Simplemente agrega ''class1 class2 class3'' a la div:
<div ng-class="[{true: ''class1''}[true], {true: ''class2 class3''}[true]]"></div>
2. Agrega clases ''impares'' o ''pares'' a div, dependiendo del índice $
<div ng-class="[{0:''even'', 1:''odd''}[ $index % 2]]"></div>
3. Crea dinámicamente una clase para cada div basada en $ index
<div ng-class="[{true:''index''+$index}[true]]"></div>
Si $index=5 esto resultará en:
<div class="index5"></div>
Aquí hay un ejemplo de código que puede ejecutar:
var app = angular.module(''app'', []);
app.controller(''MyCtrl'', function($scope){
$scope.items = ''abcdefg''.split('''');
});
.odd { background-color: #eee; }
.even { background-color: #fff; }
.index5 {background-color: #0095ff; color: white; font-weight: bold; }
* { font-family: "Courier New", Courier, monospace; }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
<div ng-repeat="item in items"
ng-class="[{true:''index''+$index}[true], {0:''even'', 1:''odd''}[ $index % 2 ]]">
index {{$index}} = "{{item}}" ng-class="{{[{true:''index''+$index}[true], {0:''even'', 1:''odd''}[ $index % 2 ]].join('' '')}}"
</div>
</div>