使用ng-class在AngularJS中切换类

18 浏览
0 Comments

使用ng-class在AngularJS中切换类

我正在尝试使用ng-class来切换元素的类。\n

\nisAutoScroll():\n

$scope.isAutoScroll = function()
{
    $scope.autoScroll = ($scope.autoScroll) ? false : true;
    return $scope.autoScroll;
}

\n基本上，如果$scope.autoScroll为true，我希望ng-class为icon-autoscroll，如果为false，我希望它为icon-autoscroll-disabled。\n我现在的做法不起作用，并在控制台中产生以下错误：\nError: Lexer Error: Unexpected next character at columns 18-18 [?] in expression [{(isAutoScroll()) ? \'icon-autoscroll\' : \'icon-autoscroll-disabled\'}].\n我应该如何正确地做到这一点？\n编辑\n解决方案1：（已过时）\n

\n编辑2\n解决方案2：\n我想将解决方案更新为Stewie提供的Solution 3，因为它应该是最常用的三元运算符（对我来说最容易阅读的）。解决方案如下：\n

\n翻译为：\nif (autoScroll == true) ? //使用类\'icon-autoscroll\' : //否则使用\'icon-autoscroll-disabled\'

0

3 答案

0 Comments

问题的出现原因：

这个问题的出现是因为在AngularJS中，我们希望根据条件来为元素添加不同的class，但是使用ng-class指令时，我们只能为元素添加一个class，无法根据不同的条件添加多个class。

解决方法：

为了解决这个问题，我们可以使用ng-class指令的对象语法，通过在ng-class中使用对象来动态地添加多个class。

具体的解决方法如下所示：

- 首先，在ng-class属性中定义一个对象。

- 对象的key是要添加的class，value是一个布尔值或者表达式，根据这个值来决定是否添加这个class。

- 当布尔值或者表达式为true时，对应的class将会被添加到元素上。

在这个例子中，我们可以看到ng-class属性中的对象有两个key-value对：

- 第一个key-value对是：{'class1 class2 class3':!isNew}，当isNew为false时，将会添加class1、class2和class3这三个class。

- 第二个key-value对是：{'class1 class4': isNew}，当isNew为true时，将会添加class1和class4这两个class。

这样，根据isNew的值的不同，元素上的class就会动态地改变。

整理得到的文章如下：

在AngularJS中使用ng-class指令实现toggle class的效果

在AngularJS中，我们经常需要根据条件来为元素添加不同的class。然而，使用ng-class指令时，我们只能为元素添加一个class，无法根据不同的条件添加多个class。那么，如何解决这个问题呢？

我们可以使用ng-class指令的对象语法来实现这个效果。具体的解决方法如下所示：

首先，在ng-class属性中定义一个对象。对象的key是要添加的class，value是一个布尔值或者表达式，根据这个值来决定是否添加这个class。当布尔值或者表达式为true时，对应的class将会被添加到元素上。

下面是一个具体的例子：


     {{ isNew }}

在这个例子中，ng-class属性中的对象有两个key-value对。第一个key-value对是：{'class1 class2 class3':!isNew}，当isNew为false时，将会添加class1、class2和class3这三个class。第二个key-value对是：{'class1 class4': isNew}，当isNew为true时，将会添加class1和class4这两个class。

这样，根据isNew的值的不同，元素上的class就会动态地改变，实现了toggle class的效果。

通过使用ng-class指令的对象语法，我们可以根据不同的条件来动态地为元素添加多个class，从而实现更加灵活的样式控制。

0
0 Comments

AngularJS中使用ng-class切换类的问题是因为需要根据条件动态地切换类名，以实现样式的变化。解决方法是使用ng-class指令结合条件表达式来实现。

解决方法如下：

以上代码中，ng-class指令的属性值是一个条件表达式。当autoScroll为真时，将添加'icon-autoscroll'这个类名；当autoScroll为假时，将添加'icon-autoscroll-disabled'这个类名。这样就实现了根据autoScroll的值来切换类名的效果。

这种解决方法相对简洁，易读性较高，使用逻辑运算符'&&'和'||'来判断条件，并根据条件返回对应的类名。

0
0 Comments

AngularJS使用ng-class切换类的方法有三种解决方案。

解决方案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>

这三种解决方案都可以实现根据条件切换类。第二种解决方案看起来更简洁，但是不能将要评估的变量放在表达式的最前面，这样读起来有些奇怪。想象一下将表达式作为if语句来看待：“如果（变量）为真，则执行这个操作，否则执行那个操作... 哎呀 #完全书呆子

真是太棒了，看起来就像是真正的代码，而不是一些奇怪的表达式标记:D

事实上，先评估值是非常有用的，因为它可以避免意外地给变量赋予一个新值。

三元运算符正是我正在寻找的。提供了三个示例与版本支持细节，做得很好。

0