有条件地应用类的最佳方法是什么？

这里有一个更简单的解决方案：

function MyControl($scope){$scope.values = ["a","b","c","d","e","f"];$scope.selectedIndex = -1;    
$scope.toggleSelect = function(ind){if( ind === $scope.selectedIndex ){$scope.selectedIndex = -1;} else{$scope.selectedIndex = ind;}}    
$scope.getClass = function(ind){if( ind === $scope.selectedIndex ){return "selected";} else{return "";}}       
$scope.getButtonLabel = function(ind){if( ind === $scope.selectedIndex ){return "Deselect";} else{return "Select";}}}

.selected {color:red;}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script><div ng-app ng-controller="MyControl"><ul><li ng-class="getClass($index)" ng-repeat="value in values" >\{\{value}} <button ng-click="toggleSelect($index)">\{\{getButtonLabel($index)}}</button></li></ul><p>Selected: \{\{selectedIndex}}</p></div>

如果你不想像我一样将CSS类名放入Controller，这里有一个我从v1前几天开始使用的老技巧。我们可以编写一个直接计算类名选择的表达式，不需要自定义指令：

ng:class="{true:'selected', false:''}[$index==selectedIndex]"

请注意带有冒号的旧语法。

还有一种更好的有条件地应用类的新方法，例如：

ng-class="{selected: $index==selectedIndex}"

Angular现在支持返回对象的表达式。该对象的每个属性（名称）现在都被视为类名，并根据其值应用。

然而，这些方法在功能上并不相等。这是一个例子：

ng-class="{admin:'enabled', moderator:'disabled', '':'hidden'}[user.role]"

因此，我们可以通过基本上将模型属性映射到类名来重用现有的CSS类，同时将CSS类排除在Controller代码之外。

我最近遇到了一个类似的问题，并决定创建一个条件过滤器：

  angular.module('myFilters', [])./*** "if" filter* Simple filter useful for conditionally applying CSS classes and decouple* view from controller*/filter('if', function() {return function(input, value) {if (typeof(input) === 'string') {input = [input, ''];}return value? input[0] : input[1];};});

它接受一个参数，它是一个2元素数组或一个字符串，它被转换为一个数组，该数组附加一个空字符串作为第二个元素：

<li ng-repeat="item in products | filter:search | orderBy:orderProp |page:pageNum:pageLength" ng-class="'opened'|if:isOpen(item)">...</li>

ng级支持必须计算为

1. 一串以空格分隔的类名，或
2. 类名的数组，或
3. 类名到布尔值的映射/对象。

因此，使用表格3）我们可以简单地写

ng-class="{'selected': $index==selectedIndex}"

另见如何在AngularJS中有条件地应用CSS样式？以获得更广泛的答案。

更新：Angular 1.1.5增加了对三元算子的支持，因此如果您更熟悉该构造：

ng-class="($index==selectedIndex) ? 'selected' : ''"

如果您想超越二进制评估并将CSS排除在控制器之外，您可以实现一个简单的过滤器，根据map对象评估输入：

angular.module('myApp.filters, []).filter('switch', function () {return function (input, map) {return map[input] || '';};});

这允许您像这样编写标记：

<div ng-class="muppets.star|switch:{'Kermit':'green', 'Miss Piggy': 'pink', 'Animal': 'loud'}">...</div>

我要补充一下，因为其中一些答案似乎已经过时了。我是这样做的：

<class="ng-class:isSelected">

其中'is选择'是在范围角控制器中定义的JavaScript变量。


为了更具体地解决您的问题，以下是如何使用它生成列表：

超文本标记语言

<div ng-controller="ListCtrl"><li class="ng-class:item.isSelected" ng-repeat="item in list">\{\{item.name}}</li></div>

JS

function ListCtrl($scope) {$scope.list = [{"name": "Item 1", "isSelected": "active"},{"name": "Item 2", "isSelected": ""}]}

见：http://jsfiddle.net/tTfWM/

见：http://docs.angularjs.org/api/ng.directive：ngClass

检查这个。

臭名昭著的AngularJSif|else语句！！！
当我开始使用Angularjs时，我有点惊讶我找不到if/else语句。

所以我正在做一个项目，我注意到当使用if/else语句时，条件会在加载时显示。你可以使用ng-cloak来解决这个问题。

<div class="ng-cloak"><p ng-show="statement">Show this line</span><p ng-hide="statement">Show this line instead</span></div>

.ng-cloak { display: none }

谢谢amadou

这是另一个在无法使用ng类时（例如在样式化SVG时）运行良好的选项：

ng-attr-class="\{\{someBoolean && 'class-when-true' || 'class-when-false' }}"

（我认为你需要在最新的不稳定的Angular上使用ng-attr-，我目前在1.1.4上）

三元运算符刚刚被添加到角度解析器1.1.5。

现在最简单的方法是：

ng:class="($index==selectedIndex)? 'selected' : ''"

这可能会被淘汰到遗忘，但以下是我如何使用1.1.5的三元运算符根据表中的一行是第一行、中间行还是最后一行来切换类——除非表中只有一行：

<span class="attribute-row" ng-class="(restaurant.Attributes.length === 1) || ($first ? 'attribute-first-row': false || $middle ? 'attribute-middle-row': false || $last ? 'attribute-last-row': false)"></span>

如果您使用的是角度prev1.1.5（即没有三元运算符），并且您仍然想要一种等效的方式来设置两者条件中的值，您可以这样做：

ng-class="{'class1':item.isReadOnly == false, 'class2':item.isReadOnly == true}"

我是Angular的新手，但发现这可以解决我的问题：

<i class="icon-download" ng-click="showDetails = ! showDetails" ng-class="{'icon-upload': showDetails}"></i>

这将有条件地应用基于var的类。它以图标下载页作为默认值开始，使用ng-class，如果true/false，我检查showDetails的状态并应用类图标上传。它工作得很好。

希望有帮助。

我最喜欢的方法是使用三元表达式。

ng-class="condition ? 'trueClass' : 'falseClass'"

备注：如果你使用的是旧版本的Angular，你应该使用这个，

ng-class="condition && 'trueClass' || 'falseClass'"

如果您有一个应用于许多元素的公共类，您可以创建一个自定义指令来添加该类，例如ng-show/ng-hide。

如果单击按钮，此指令将向按钮添加类“active”

module.directive('ngActive',  ['$animate', function($animate) {return function(scope, element, attr) {scope.$watch(attr.ngActive, function ngActiveWatchAction(value){$animate[value ? 'addClass' : 'removeClass'](element, 'active');});};}]);

更多信息

我最近做的是这样做的：

<input type="password"  placeholder="Enter your password"ng-class="{true: 'form-control isActive', false: 'isNotActive'}[isShowing]">

isShowing值是位于我的控制器上的一个值，只需单击一个按钮即可切换，单括号之间的部分是我在css文件中创建的类。

编辑：我还想补充一点，codeschool.com有一个免费课程，由谷歌在AngularJS上赞助，该课程涵盖了所有这些东西，然后是一些。不需要支付任何费用，只需注册一个帐户即可！祝大家好运！

只是添加一些今天对我有用的东西，经过多次搜索…

<div class="form-group" ng-class="{true: 'has-error'}[ctrl.submitted && myForm.myField.$error.required]">

希望这有助于你的成功发展。

=）

未记录的表达式语法：很棒的网站链接…=）

部分

  <div class="col-md-4 text-right"><a ng-class="campaign_range === 'thismonth' ? 'btn btn-blue' :  'btn btn-link'" href="#" ng-click='change_range("thismonth")'>This Month</a><a ng-class="campaign_range === 'all' ? 'btn btn-blue' :  'btn btn-link'" href="#" ng-click='change_range("all")'>All Time</a></div>

控制器

  $scope.campaign_range = "all";$scope.change_range = function(range) {if (range === "all"){$scope.campaign_range = "all"}else{$scope.campaign_range = "thismonth"}};

那么我建议你用返回真正或虚假的函数检查控制器中的条件。

<div class="week-wrap" ng-class="{today: getTodayForHighLight(todayDate, day.date)}">\{\{day.date}}</div>

在你的控制器里检查情况

$scope.getTodayForHighLight = function(today, date){return (today == date);}

我们可以发挥作用用条件来管理返回类

<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) {switch(strValue) {case "It is Red":return "Red";break;case "It is Yellow":return "Yellow";break;case "It is Blue":return "Blue";break;case "It is Green":return "Green";break;case "It is Gray":return "Gray";break;}}}]);</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><hr/><p>Other way using : ng-class="{'class1' : expression1, 'class2' : expression2,'class3':expression2,...}"</p><ul><li ng-repeat="icolor in MyColors"><p ng-class="{'Red':icolor=='It is Red','Yellow':icolor=='It is Yellow','Blue':icolor=='It is Blue','Green':icolor=='It is Green','Gray':icolor=='It is Gray'}" class="b">\{\{icolor}}</p></li></ul>

您可以参考ng类if示例的完整代码页

这就像一个魅力；）

<ul class="nav nav-pills" ng-init="selectedType = 'return'"><li role="presentation" ng-class="{'active':selectedType === 'return'}"ng-click="selectedType = 'return'"><a href="#return">return
</a></li><li role="presentation" ng-class="{'active':selectedType === 'oneway'}"ng-click="selectedType = 'oneway'"><a href="#oneway">oneway</a></li></ul>

这是我工作中的多重条件判断：

<li ng-repeat='eOption in exam.examOptions' ng-class="exam.examTitle.ANSWER_COM==exam.examTitle.RIGHT_ANSWER?(eOption.eoSequence==exam.examTitle.ANSWER_COM?'right':''):eOption.eoSequence==exam.examTitle.ANSWER_COM?'wrong':eOption.eoSequence==exam.examTitle.RIGHT_ANSWER?'right':''"><strong>\{\{eOption.eoSequence}}</strong> &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;<span ng-bind-html="eOption.eoName | to_trusted">2020 元</span></li>

您可以使用这个 npm包。它处理所有内容，并具有基于变量或函数的静态和条件类的选项。

// Support for string argumentsgetClassNames('class1', 'class2');
// support for ObjectgetClassNames({class1: true, class2 : false});
// support for all type of datagetClassNames('class1', 'class2', ['class3', 'class4'], {class5 : function() { return false; },class6 : function() { return true; }});
<div className={getClassNames({class1: true, class2 : false})} />

我理解这个问题id的角度，但是如果有人使用React或基于React-based的框架（Amplify、NextJS、Serverless等），解决方案要容易得多。最有效的方法是使用三元运算符，如下所示：

<div className={condition ? "classnameiftrue" : "classnameiffalse"}>

如果使用useState()，则可以使用此策略对树进行动画处理，因为每次状态更改时，它都将使用新值重新加载该条件。