CSS類僅應用於一個元素

Question

每隔2秒就會觸發我的js函數，並在執行某些邏輯后，我想對頁面上的html元素施加影響的css類。

   var myCounter= 0;        

    $interval(function () {            
        myCounter++;
        DoSomething();
        $('#myElem_' + myCounter).addClass('myClass');
    }, 2000);

    function DoSomething() {
        if (myCounter<= 35) {                
            if (myCounter == 0) {
                $scope.myIndex= 1;
            } else {
                $scope.myIndex= myCounter;                   
            }

        } else {
            // not implemented
        }
    }

在html頁面上，css類僅在第一次應用。 計數器可以工作，但是css只能應用於第一個元素。

在html頁面上，html元素上有唯一的ID號，例如

<div id="myElem_1"></div>
<div id="myElem_2"></div>

Answer 1

您的代碼似乎很好。 請注意，第一個元素在2秒鍾后獲得該類，然后再過 2秒鍾，第二個元素將獲得該類。

因此，您必須總共等待4秒鍾才能看到所有更改。

Answer 2

您需要使用$scope.$apply(); 在您的功能進行所有更改之后：

function DoSomething() {
    if (myCounter<= 35) {                
        if (myCounter == 0) {
            $scope.myIndex= 1;
        } else {
            $scope.myIndex= myCounter;                   
        }

    } else {
        // not implemented
    }

    $scope.$apply(); // <---put this one here.

}

我猜您正在上面的函數中更改/更新一些范圍變量，因此您需要告訴angular檢查更改和更新范圍。