angularjs - 当 $interval 触发时 ng-show 不会更新类

尝试使用 Angular 中的 $interval 来使用 ng-show 更改列表中当前可见的项目。检查 html，我注意到角度将 ng-show 从 true/false 更改，但它并没有删除 ng-hide 类。 html 很简单：

<h1>Hello Plunker!</h1>
<div ng-controller="MyCtrl">
  <div>Iterator: {{i}}</div>
  <ul>
    <li ng-repeat="d in data" ng-show="{{i == $index}}">{{i}} - {{$index}} - {{d}}</li>
  </ul>
</div>

app.js 也很基本：

(function(){  
   var app = angular.module('MyApp', ['my-controller']);
})();

和我的模块/控制器

(function(){
  var app = angular.module('my-controller', []);

  app.controller('MyCtrl', ['$scope', '$interval', function($scope, $interval){
    $scope.data = [111, 222, 333, 444];
    $scope.i = 0;
    var timeoutId;


    timeoutId = $interval(function(){
      $scope.i ++;  
      if ($scope.i >= $scope.data.length)
        $scope.i = 0;
    },
    1000);


  }]);
})();

这是我的 plnkr http://plnkr.co/edit/tdz1ejGK5qXLJy4nqPRG?p=preview

这是因为您正在通过使用插值设置字符串“true”/“false”（{{i == $index}}) 在 ng-show 表达式中，而是直接提供表达式。

ng-show="i == $index"

Plnkr http://plnkr.co/edit/t01l0r?p=preview

只是添加解释，看看ng-显示源代码 https://github.com/angular/angular.js/blob/master/src/ng/directive/ngShowHide.js#L161

 scope.$watch(attr.ngShow, function ngShowWatchAction(value) {
    // we're adding a temporary, animation-specific class for ng-hide since this way
    // we can control when the element is actually displayed on screen without having
    // to have a global/greedy CSS selector that breaks when other animations are run.
    // Read: https://github.com/angular/angular.js/issues/9103#issuecomment-58335845
    $animate[value ? 'removeClass' : 'addClass'](element, NG_HIDE_CLASS, {
      tempClasses: NG_HIDE_IN_PROGRESS_CLASS
    });
  });

它在属性值上注册了一个监视，因此当使用插值（首先渲染）时，它实际上将监视设置为"true"对于第一项和"false"对于最后三个（如预期）。一切都很好，手表第一次运行脏检查，它被解析为布尔值，并将 ng-hide 类添加到最后 3 个类，第一个类仍然显示。因此，到目前为止，watch 设置在作用域上的字符串“true/false”上，它永远不会改变，并且 watch 不再执行（因为在您的情况下，在由超时触发的摘要周期期间它总是会返回相同的值）和项目显示仍然显示，隐藏仍然隐藏，因为它永远没有机会执行add/removeClass。现在，当您使用表达式时，每次摘要发生时都会对它进行评估，布尔标志会随着表达式值的变化而评估，观察程序会被执行，并且类会按预期添加/删除。