代码之家 › 专栏 › 技术社区 › Leo Messi

在ng类中删除和添加类

jquery-selectors angularjs css jquery javascript

Leo Messi · 技术社区 · 6 年前

具有一些元素,其中包含工作方式类似于三元运算符的ng类:

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

例如,为了访问它们,所有元素 fa-minus 可以存储在列表中:

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

我的问题是是否可以在ng类中修改。例如,对于所有具有 fa减 把它改成 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类。我只想在创建导出文件的函数中更改它

2 回复 | 直到 6 年前

Pankaj Parkar charlietfl 6 年前

使用AngularJS时避免直接操作DOM。你可以用下面的代码以角的方式来做。

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

Mamun 6 年前

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

推荐文章

learner · 如果超出限制,AngularJS ui select multiple应显示警报

2 年前

Onyx · 外部和内部div都有ng click,当我单击内部div时,两个ng click都会执行。如何预防?

2 年前

Michlut · Angular JS——从表单上传文件,并作为json对象的一部分与其他数据一起发送

2 年前

jieunbi · 按日期排序数组(最新优先)

2 年前

StackoverflowNinja · 当数字框的值在AngularJS中更改时更改下拉列表的值

2 年前

Stradosphere · 如何防止ng bind html添加结束标记?

6 年前

Celestialchippy · 如果事情是真的,如何创建一个“<a>”链接?

6 年前

a4aravind · Angulari如何使用java驱动程序访问元素?

6 年前

Nicoleta Wilskon · DecodeURIComponent不支持%uxxx编码的组件

6 年前

Nishant Florentin · 在AngularJS中发生ng if、ng show等之后,我该如何做一些动作?

6 年前