Question

我正在开发angularjs应用程序。

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

如前3个div的演示所示，它在每5秒后显示div值，同样我想显示div调用使用ng-repeat的detailsController。我想显示ng-repeat的每个元素，延迟时间为5秒，如前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>

API docs

Answer 2

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

这是一个有效的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);
});

ng-repeat分别显示每个元素

2 个答案: