假设您有一个呈现为的数组,ul
其中li
每个元素都有一个,控制器上有个名为的属性selectedIndex
。li
用selectedIndex
AngularJS中的索引向类添加类的最佳方法是什么?
我目前正在(手动)复制li
代码并将类添加到li
标签之一中,并使用ng-show
和ng-hide
仅显示li
每个索引一个。
假设您有一个呈现为的数组,ul
其中li
每个元素都有一个,控制器上有个名为的属性selectedIndex
。li
用selectedIndex
AngularJS中的索引向类添加类的最佳方法是什么?
我目前正在(手动)复制li
代码并将类添加到li
标签之一中,并使用ng-show
和ng-hide
仅显示li
每个索引一个。
Answers:
如果您不想像我一样将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代码之外。
($index==selectedIndex) ? 'selected' : ''
吗?
{classname: '$index === selectedIndex'}
,但是它没有用。当我将所有内容组合在一起并使用==而不是===时,它起作用了。 {classname: '$index==selectedIndex'}
ng-class支持一个表达式,其值必须为
因此,使用表格3)我们可以简单地编写
ng-class="{'selected': $index==selectedIndex}"
另请参阅如何在AngularJS中有条件地应用CSS样式?以获得更广泛的答案。
更新:Angular 1.1.5添加了对三元运算符的支持,因此,如果您对该结构更熟悉:
ng-class="($index==selectedIndex) ? 'selected' : ''"
ng-class="{'selected': $index==selectedIndex}"
为我工作
我最喜欢的方法是使用三元表达式。
ng-class="condition ? 'trueClass' : 'falseClass'"
注意:如果您使用的是Angular的旧版本,则应改用它,
ng-class="condition && 'trueClass' || 'falseClass'"
ng-class="property.name=='timestamp' ? 'property-timestamp' : 'property-'+{{$index}}"
。无法找出其他任何方式。
我将对此加以补充,因为其中一些答案似乎已过时。这是我的方法:
<class="ng-class:isSelected">
其中“ isSelected”是在范围角度控制器内定义的javascript变量。
为了更具体地解决您的问题,以下是如何生成带有该列表的列表:
的HTML
<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": ""}
]
}
ng-class:className
vs只是使用感到好奇class="{{className}}"
吗?
这是一个更简单的解决方案:
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>
我最近遇到了类似的问题,因此决定只创建一个条件过滤器:
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>
filter('yesNo', function() { return function(input) { // info('yesNo('+ input +')'); switch(input){ case '1': return ' yes '; break; default: return ' no '; break; } } });
如果您不希望进行二进制评估,而将CSS排除在控制器之外,则可以实现一个简单的过滤器,该过滤器根据地图对象评估输入:
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>
我最近做的是这样做的:
<input type="password" placeholder="Enter your password"
ng-class="{true: 'form-control isActive', false: 'isNotActive'}[isShowing]">
的 isShowing
值是位于控制器上的一个值,可通过单击按钮进行切换,并且单个括号之间的部分是我在css文件中创建的类。
编辑:我也想补充一点,codeschool.com有一个免费课程,由google在AngularJS上赞助,涵盖了所有这些东西,然后再介绍一些。无需支付任何费用,只需注册一个帐户即可开始使用!祝大家好运!
isShowing
那么控制器中是否有数组?
我们可以创建一个函数来管理带有条件的返回类
<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>
我是Angular的新手,但发现此问题可以解决我的问题:
<i class="icon-download" ng-click="showDetails = ! showDetails" ng-class="{'icon-upload': showDetails}"></i>
这将有条件地应用基于var的类。它以默认情况下的图标下载开始,使用ng-class,我检查showDetails
if 的状态true/false
并应用class icon-upload。它的工作很棒。
希望能帮助到你。
这就像一个魅力;)
<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> |
<span ng-bind-html="eOption.eoName | to_trusted">2020 元</span>
</li>
当无法使用ng-class时(例如,在设置SVG样式时),这是一个很好的选择:
ng-attr-class="{{someBoolean && 'class-when-true' || 'class-when-false' }}"
(我认为您需要使用最新的不稳定Angular才能使用ng-attr-,我目前使用的是1.1.4)
<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"
}
};
如果您使用的是v1.1.5之前的版本 (即没有三元运算符),并且仍然希望以相同的方式在两种情况下设置值,则可以执行以下操作:
ng-class="{'class1':item.isReadOnly == false, 'class2':item.isReadOnly == true}"
如果您有一个适用于许多元素的通用类,则可以创建一个自定义指令,该指令将添加该类,例如ng-show / ng-hide。
如果单击该指令,它将在按钮上添加“活动”类
module.directive('ngActive', ['$animate', function($animate) {
return function(scope, element, attr) {
scope.$watch(attr.ngActive, function ngActiveWatchAction(value){
$animate[value ? 'addClass' : 'removeClass'](element, 'active');
});
};
}]);
更多信息
经过大量搜索之后,才添加今天对我有用的内容...
<div class="form-group" ng-class="{true: 'has-error'}[ctrl.submitted && myForm.myField.$error.required]">
希望这对您的成功发展有所帮助。
=)
检查一下。
臭名昭著的AngularJS if|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 }
谢谢阿马杜
您可以使用此 npm软件包。它处理所有事情,并具有基于变量或函数的静态和条件类的选项。
// Support for string arguments
getClassNames('class1', 'class2');
// support for Object
getClassNames({class1: true, class2 : false});
// support for all type of data
getClassNames('class1', 'class2', ['class3', 'class4'], {
class5 : function() { return false; },
class6 : function() { return true; }
});
<div className={getClassNames({class1: true, class2 : false})} />