我们可以有多个表达式来添加多个ng-class吗?
例如
<div ng-class="{class1: expressionData1, class2: expressionData2}"></div>
如果是,那么任何人都可以举这个例子。
。
我们可以有多个表达式来添加多个ng-class吗?
例如
<div ng-class="{class1: expressionData1, class2: expressionData2}"></div>
如果是,那么任何人都可以举这个例子。
。
Answers:
在不同的表达式求和时应用不同的类true
:
<div ng-class="{class1 : expression1, class2 : expression2}">
Hello World!
</div>
在表达式为真时应用多个类:
<!-- notice expression1 used twice -->
<div ng-class="{class1 : expression1, class2 : expression1}">
Hello World!
</div>
或者很简单:
<div ng-class="{'class1 class2' : expression1}">
Hello World!
</div>
注意css类周围的单引号。
'class1 class2': expression
)似乎可以正常工作,不同之处在于,如果重用一个类,则当表达式在选项之间切换时,它会被删除。例如,'commonClass class1': expression == true, 'commonClass class2': expression == false
随着表达式在true和false之间切换,将会丢失commonClass。
class="commonClass" ng-class={'class1' : expression, 'class2' : !expression}
ng-class="{'class1' : expression1, 'class2':expression1 }"
可能吗 你介意看我的问题 stackoverflow.com/questions/25391692/...
对于三元运算符表示法:
<div ng-class="expression1? 'class1 class2' : 'class3 class4'">
ng-class="[expression1? 'class1 class2' : 'class3 class4', expression2 ? 'class5' : 'class6']"
这是其他答案的强大替代方法:
ng-class="[ { key: resulting-class-expression }[ key-matching-expression ], .. ]"
一些例子:
1.只需在div中添加“ class1 class2 class3”:
<div ng-class="[{true: 'class1'}[true], {true: 'class2 class3'}[true]]"></div>
2.根据$ index,向div添加“ odd”或“ even”类:
<div ng-class="[{0:'even', 1:'odd'}[ $index % 2]]"></div>
3.根据$ index为每个div动态创建一个类
<div ng-class="[{true:'index'+$index}[true]]"></div>
如果$index=5
这将导致:
<div class="index5"></div>
这是您可以运行的代码示例:
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>
ng-class
指令,例如,当我需要在同一元素上应用三元和标准表达式时。我已对接受的答案进行了修改,以包括表达式数组的使用。
[{true:'index'+$index}[true], {0:'even', 1:'odd'}[ $index % 2 ]]
可以像这样简化['index'+$index, {0:'even', 1:'odd'}[ $index % 2 ]]
。我刚刚在Angular 1.5.9中尝试了它,它的效果很不错:)感谢您的出色回答!
使用$scope
控制器上的方法,可以计算要在视图中输出的类。如果您具有用于计算类名的复杂逻辑,并且通过将其移至控制器来减少视图中的逻辑量,这尤其方便。
app.controller('myController', function($scope) {
$scope.className = function() {
var className = 'initClass';
if (condition1())
className += ' class1';
if (condition2())
className += ' class2';
return className;
};
});
在视图中,只需:
<div ng-class="className()"></div>
className
吗?
ng-
绑定决定在满足该条件时要使用哪个类。
className
。
您的示例适用于条件类(如果expressionDataX
true,则显示类名):
<div ng-class="{class1: expressionData1, class2: expressionData2}"></div>
您还可以添加由元素的用户提供的多个类:
<div ng-class="[class1, class2]"></div>
用法:
<div class="foo bar" class1="foo" class2="bar"></div>
{}
和使用数据绑定类[]
?
ngClass
在一个元素上放置两个指令。
<a href="#/u/[[msg.from]]" ng-bind="msg.from" class="name, ng-class:[users[msg.from].nice, users[msg.from].star];" ng-class="{premium: users[msg.from].premium}"></a>
以及更多:scotch.io/tutorials/javascript/the-many-ways-to-use-ngclass
在active和activemenu下面是类,而itemCount和ShowCart是表达式/布尔值。
ng-class="{'active' : itemCount, 'activemenu' : showCart}"
通过Scotch.io找到了另一种方法
<div ng-repeat="step in steps" class="step-container step" ng-class="[step.status, step.type]" ng-click="onClick(step.type)">
这是我的参考。路径
我们可以通过其他方式创建一个函数来控制“使用多个类”
的CSS
<style>
.Red {
color: Red;
}
.Yellow {
color: Yellow;
}
.Blue {
color: Blue;
}
.Green {
color: Green;
}
.Gray {
color: Gray;
}
.b {
font-weight: bold;
}
</style>
脚本
<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>
使用它
<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>