在ng-class中删除和添加类

Posted 2021-04-13

有一些元素包含一个像三元运算符一样工作的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级。我想只在创建导出文件的函数内更改它

有办法解决这个问题吗？

答案

使用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')
}

另一答案

你可以在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>

以上是关于在ng-class中删除和添加类的主要内容，如果未能解决你的问题，请参考以下文章

AngularJS ng-class 添加类但在更改时不删除它

使用 ng-click 在 angularJs 中添加和删除类

使用 ng-class 添加多个类

ng-class 在表的第一行有类并在 ng-click 上将其删除

如何在angularjs中动态地将样式属性添加到具有ng-class的元素

带有 ng-class 指令的 ng-animate