Question

我有一个滑块（使用角度材质），它与一个Controller As变量（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等。

似乎并非所有项目类都会在avm.itemsIndex更改时更新。

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

Answer 1

要调试只使用{{ avm.itemsIndex == $index+2 }}转储值我使用控制器作为语法。您是否尝试过avm.itemsIndex函数而不是属性？使用函数时，我对绑定感到非常高兴。

所以而不是：

this.itemsIndex = 5;

你会：

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

并在您的HTML中：

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

Answer 2

最终工作的是在更新标记类时稍微超时（20ms）。它似乎是一个浏览器问题而不是角度问题，并且与更快地更新标签属性有关

Angular不基于$ index更新ngclass

2 个答案: