Question

具有一些包含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类而不是经典的CSS类。

不应更改原始的ng-class。我只想在创建导出文件的函数中进行更改

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

Answer 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')
}

Answer 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>

在ng-class中删除和添加类

2 个答案: