AngularJS使用ng类切换类
AngularJS toggle class using ng-class
我正在尝试使用ng-class
切换元素的类
<button class="btn">
<i ng-class="{(isAutoScroll()) ? 'icon-autoscroll' : 'icon-autoscroll-disabled'}"></i>
</button>
isAutoScroll((:
$scope.isAutoScroll = function()
{
$scope.autoScroll = ($scope.autoScroll) ? false : true;
return $scope.autoScroll;
}
基本上,如果$scope.autoScroll
为真,我希望ng类为icon-autoscroll
,如果为假,我希望它为icon-autoscroll-disabled
我现在没有工作,正在控制台中产生这个错误
Error: Lexer Error: Unexpected next character at columns 18-18 [?] in expression [{(isAutoScroll()) ? 'icon-autoscroll' : 'icon-autoscroll-disabled'}].
如何正确执行此操作?
编辑
解决方案1:(过时的(
<button class="btn" ng-click="autoScroll = !autoScroll">
<i ng-class="{'icon-autoscroll': autoScroll, 'icon-autoscroll-disabled': !autoScroll}"></i>
</button>
编辑2
解决方案2:
我想更新解决方案,因为应该使用Stewie提供的Solution 3
。当涉及到三元运算符时,它是最标准的(对我来说最容易阅读(。解决方案是
<button class="btn" ng-click="autoScroll = !autoScroll">
<i ng-class="autoScroll ? 'icon-autoscroll' : 'icon-autoscroll-disabled'"></i>
</button>
翻译为:
if (autoScroll == true) ?
//使用类'icon-autoscroll' :
//否则使用'icon-autoscroll-disabled'
如何在ng类中使用条件:
解决方案1:
<i ng-class="{'icon-autoscroll': autoScroll, 'icon-autoscroll-disabled': !autoScroll}"></i>
解决方案2:
<i ng-class="{true: 'icon-autoscroll', false: 'icon-autoscroll-disabled'}[autoScroll]"></i>
解决方案3(angular v.1.1.4+引入了对三元运算符的支持(:
<i ng-class="autoScroll ? 'icon-autoscroll' : 'icon-autoscroll-disabled'"></i>
Plunker
作为替代解决方案,基于javascript逻辑运算符'&;'返回最后一次评估,您也可以这样做:
<i ng-class="autoScroll && 'icon-autoscroll' || !autoScroll && 'icon-autoscroll-disabled'"></i>
它的语法略短,但对我来说更容易阅读。
根据条件添加多个类:
<div ng-click="AbrirPopUp(s)"
ng-class="{'class1 class2 class3':!isNew,
'class1 class4': isNew}">{{ isNew }}</div>
Apply:class1+class2+class3当isNew=false时,
当isNew=true
<div data-ng-init="featureClass=false"
data-ng-click="featureClass=!featureClass"
data-ng-class="{'active': featureClass}">
Click me to toggle my class!
</div>
类似于jQuery的toggleClass
方法,这是一种在单击元素时打开/关闭active
类的方法。
autoscroll
将在控制器中定义和修改:
<span ng-class= "autoscroll?'class_if_true':'class_if_false'"></span>
根据条件添加多个类别:
<span ng-class= "autoscroll?'first second third':'classes_if_false'"></span>
我是这样做的:
<button class="btn" ng-click='toggleClass($event)'>button one</button>
<button class="btn" ng-click='toggleClass($event)'>button two</button>
在您的控制器中:
$scope.toggleClass = function (event) {
$(event.target).toggleClass('active');
}
- AngularJS-ng使用字符串索引在数组上重复
- ng-使用重复条目重复重复数据
- ng使用ui视图制作动画
- ng使用angular中的json数据使用optgroup重复select
- ng使用一个不识别临时变量形式ng repeat的函数绑定html
- NG使用过滤器重复比较当前日期
- ng使用UI引导指令绑定html
- AngularJS ng使用#键重复数据
- ng使用'跟踪$index'在ng重复中
- ng使用angular.js制作传播动画
- ng使用服务器端处理在数据表中进行剪辑
- ng使用内联编辑重复,如何使第一个(或最后一个)元素的editmode=true
- Angularjs ng使用数组中相同的元素重复动画
- Angularjs ng使用AND条件重复计数已筛选项目
- ng使用coffeescript表多个模板过滤器
- ng使用as别名重复不起作用
- Ng使用angularjs用Json文件重复
- Ng使用生成的字段重复提交表单
- ng使用requirejs时动画无法工作
- ng使用bootstrap重复多行