Удаление и добавление классов внутри ng-класса

Question

Наличие некоторых элементов, которые содержат класс ng, который работает как троичный оператор:

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

Для доступа к ним, например, все элементы, имеющие fa-minusможет быть сохранен в список:

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

Мой вопрос, возможно ли изменить внутри класса ng.Например, для всех элементов, имеющих 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.Я хочу изменить его только внутри функции, которая создает файл экспорта

Есть ли способ решить эту проблему?

Answer 1

Избегайте прямых манипуляций с DOM при использовании AngularJS.Вы можете сделать это угловым способом, используя приведенный ниже код.

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>