ng-repeat 分别显示每个元素

Question

我正在开发 angularjs 应用程序。

请找到演示：http://plnkr.co/edit/77CLq8lB0livmtCXLTKa?p=preview

如前 3 个 div 的演示中所示，它每 5 秒显示一次 div 值，同样我想为使用 ng-repeat 的 div 调用 detailsController 显示。我想以 5 秒的延迟显示 ng-repeat 的每个元素，如前 3 个 div 所示。

下面是示例html代码

<div ng-controller="MainController" style="width: 100%">
  <div ng-if="show==1">
    11111111111
  </div>

  <div ng-if="show==2">
    2222222222
  </div>

  <div ng-if="show==3">
    333333333
  </div>

  <div ng-if="show==4" ng-controller="detailsController">
    <div ng-repeat="detail in details">
      {{detail.name}} {{$index}} <br> DetailList : {{detailsList}}
    </div>
  </div>
</div>

如前 3 个 div 的演示中所示，它显示为幻灯片，每个都有 5 秒的延迟。 同样，我想显示列表中的每个元素，使用 ng-repeat 进行迭代，延迟 5 秒，而不是显示列表中的所有元素，如演示中所示。 任何建议都会有所帮助。

Answer 1

您可以检查show == $index。

<div ng-repeat="detail in details">
   <div ng-if="show==$index">
      {{detail.name}} {{$index}} <br>
      DetailList : {{detailsList}}
   </div>
</div>

http://plnkr.co/edit/5OvcToWEVFidrDnk9NTo?p=preview

Answer 2

您需要将detailsList 变量存储在$rootScope 中，然后在模板中使用{{details[detailsList].name}}。在MainController 的同一区间内更新detailsList。不要为此使用两个单独的时间间隔，因为它们同时运行，因此您看不到更新。

这是一个有效的plunkr demo。

index.html

<div ng-if="show==4" ng-controller="detailsController">
    <div>
        {{details[detailsList].name}}
    </div>
</div>

app.js

app.controller('MainController', function($scope,$rootScope, $interval) {
    $scope.show = 1;
    $scope.slide = "sample clise";
    $rootScope.detailsList = 0;

    $interval(function() {
        if ($scope.show === 4) {
            if ($rootScope.detailsList < 2) {
                ++$rootScope.detailsList;
            } else {
                $rootScope.detailsList = 0;
                $scope.show = 1;
            }
        }
        else if ($scope.show < 4) {
            ++$scope.show; 
        } else {
            $scope.show = 1;
        }
    }, 5000, 0);
});