基于$index的Angular不更新ngclass

Question

我有一个滑块(使用angular-material)，它是控制器的变量(avm.itemsIndex)，它在ng-repeat列表的ng-class中使用。

因此，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等。

似乎并不是所有的item类都会在avm.itemsIndex发生变化时进行更新。

有谁知道我如何解决这个问题，甚至是如何调试它？

Answer 1

要调试，只需使用{{ avm.itemsIndex == $index+2 }}转储值，我经常使用controller作为语法。你有没有试过把avm.itemsIndex变成一个函数而不是一个属性？在使用函数时，最好使用绑定的joy。

因此，不是：

this.itemsIndex = 5;

您将拥有：

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

在你的HTML中：

avm.itemsIndex() === $index+1; // notice parantheses

Answer 2

最终起作用的是在更新tag类时设置了一个轻微的超时(20ms)。这似乎是一个浏览器问题，而不是一个角度问题，而且与更新标签属性太快有关