在 ng-class 中删除和添加类

Posted 2023-05-08

【中文标题】在 ng-class 中删除和添加类

【英文标题】：Removing and adding classes inside an ng-class

【发布时间】：2019-02-21 11:20:32

【问题描述】：

有一些包含 ng-class 的元素，其工作方式类似于三元运算符：

ng-class="$ctrl.something ? 'fa-minus' : 'fa-plus'"

例如，为了访问它们，可以将所有具有fa-minus 的元素存储到一个列表中：

const elementList = document.querySelectorAll('.fa-minus');

我的问题是是否可以在 ng-class 中进行修改。例如，对于所有具有fa-minus 的元素，将其更改为fa-square。

之后我尝试了几种方法，例如删除和添加类：

    const elementList = document.querySelectorAll('.fa-minus');
    document.forEach(document=> document.classList.remove('.fa-minus'));
    document.forEach(document=> document.classList.add('fa-square'));

不起作用，可能是因为原来的那个是 ng-class 而不是经典的 css 类。

不应该改变原来的ng-class。我只想在创建导出文件的函数中更改它

有没有办法解决这个问题？

【参考方案1】：

在使用 AngularJS 时避免直接的 DOM 操作。您可以使用以下代码以角度方式执行此操作。

HTML

ng-class="$ctrl.getClass()"

控制器

var $ctrl = this;
var MINUS = 'fa-minus';
var PLUS = 'fa-plus';

getClass () 
   return $ctrl.something ? MINUS : PLUS


changeMinusClass(newClass) 
   MINUS = newClass


onClickOfSomething () 
   this.changeMinusClass('fa-square')

【讨论】：

它不应该改变原来的ng-class。我只想在创建导出文件的函数中更改它

@LeoMessi 哦，伙计。请在初始级别的问题中提及这些重要的事情。请更新您的问题

【参考方案2】：

你可以remove()add() 之前的类。您不应使用 document 作为变量的名称。此外，使用与处理函数的参数相同的名称也不是一个好习惯。

以下示例显示了如何做到这一点：

var d = document.querySelectorAll('span');
d.forEach(el=> 
  el.classList.remove('fa-minus');
  el.classList.add('fa-square');
);

// for demonstration
document.querySelectorAll('span').forEach(s => console.log(s.getAttribute('class')));

<span class="fa-minus">Test 1</span>
<span class="fa-minus">Test 2</span>

【讨论】：

@LeoMessi，请不要在同一行中使用这两个函数。使用像我更新的答案这样的个人陈述.....

@LeoMessi，我有点惊讶。我希望我能看到现场！