Angular не обновляет ngclass на основе $ index

0

У меня есть ползунок (с использованием углового материала), который связан с переменной Controller As (avm.itemsIndex), которая используется в ng-классе в списке ng-repeat.

Поэтому каждый элемент в ng-repeat имеет:

ng-class="{ 
            active : avm.itemsIndex == $index, 
            selected : avm.selecting==item.name, 
            left : avm.itemsIndex == $index+1 ,
            left2 : avm.itemsIndex == $index+2,
            right : avm.itemsIndex == $index-1,
            right2 : avm.itemsIndex == $index-2
        }"

Таким образом, никакие два элемента никогда не должны иметь. Active, потому что все они сравнивают $ index с avm.itemsIndex. Также ни один элемент не имеет как.active, так и.left,.left 2 и т.д.

Проблема в том, что если я быстро перетаскиваю слайдер, чтобы он быстро обновлял avm.itemsIndex, тогда несколько элементов будут иметь.active, а некоторые могут иметь.active и.left,.left2 и т.д.

Кажется, что не все классы элементов обновляются, когда изменяется avm.itemsIndex.

Кто-нибудь знает, как я могу это решить, или даже отладить его?

  • 0
    Вы должны опубликовать больше своего кода, чтобы мы могли проверить возможные причины.
  • 0
    Больше нечего показывать. Как я уже сказал, переменная avm.itemsIndex связана со слайдером материала. Когда слайдер перемещается, значение изменяется. Это значение меняется правильно. Кажется, что ng-class не обновляет классы на всех элементах каждый раз, когда изменяется avm.itemsIndex, особенно если это изменение происходит быстро, быстро перемещая слайдер. Если я дам дамп {{avm.itemsIndex}} и {{$ index}} в представлении, они верны. Проблема в том, что ng-class не обновляет все классы элементов в повторении.
Теги:

2 ответа

0

В итоге в итоге был установлен небольшой тайм-аут (20 мс) при обновлении класса тегов. Похоже, что проблема с браузером более чем угловатая, и слишком быстро обновляет атрибут тега

Поделиться
0

Для отладки просто дамп значения с помощью {{ avm.itemsIndex == $index+2 }} Я использую контроллер как синтаксис. Вы пытались сделать avm.itemsIndex функцией вместо свойства? У меня была лучшая радость от привязки при использовании функций.

Поэтому вместо:

this.itemsIndex = 5;

Вам придется:

this.itemsIndex = function() {
    return 5;
}

и в вашем HTML:

avm.itemsIndex() === $index+1; // notice parantheses
Поделиться
  • 0
    Спасибо за это. Я попытался сделать avm.itemsIndex функцией, но с тем же результатом. Странно то, что если я сбрасываю переменные в каждом элементе, значения отображаются правильно, но ng-class по-прежнему неправильно понимает классы, так что {{avm.itemsIndex === $ index}} показывает «false», но все равно имеет класс .active из: active: avm.itemsIndex === $ index
  • 0
    try ... active: avm.itemsIndex ($ index) ... и получить функцию для возврата логического значения - проверьте, что $ index является ожидаемым значением внутри функции и что функция возвращает ожидаемое логическое значение
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню