在Angular中的作用域，并且仅将CSS类应用于第一个div。

8 浏览
0 Comments

在Angular中的作用域，并且仅将CSS类应用于第一个div。

我每2秒钟调用一次js函数，在某些条件下我想要更新视图中的div。

在ng控制器上的代码：

var myCounter = 0;
var interval = $interval(function () {
    if (myCounter <= 35) {
        myCounter ++;
        DoSomething();
    } else {
        //
    }
}, 1500);
function setCurrentBallEffect() {
    $('#ball_' + myCounter).addClass('magictime puffIn');                
}
function DoSomething() {
    if (myCounter == 0) {
        $scope.ballIndex = 1;
    } else {
        $scope.ballIndex = myCounter;
    }
}

只有迭代中的第一个div应用了magictime puffIn类。当我在视图上硬编码div的id时，如1 2，应用的css类在每个div上都起作用。我做错了什么？

更新：

尝试了

但问题仍然存在。

0

1 答案

0 Comments

在这段代码中，问题出现在对$scope.ballIndex的赋值上。在DoSomething函数中，如果myCounter为0，则将$scope.ballIndex赋值为1，否则将$scope.ballIndex赋值为myCounter。然后，将$scope.ballIndex插入到HTML中的

标签中。

然而，我们注意到在HTML中的

标签上没有使用$scope.ballIndex。相反，它使用了ballIndex变量，这是一个未定义的变量。因此，CSS类只会应用于第一个

标签，因为只有第一个

标签的ballIndex变量被正确赋值。

要解决这个问题，我们应该在HTML中使用$scope.ballIndex，而不是ballIndex变量。修改HTML如下：

<div id="ball_{{ballIndex}}">{{ballIndex}}</div>

这样，每个

标签都将正确地使用$scope.ballIndex进行赋值，CSS类也将正确地应用于每个

标签。

0