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=預覽

Answer 2

您需要將您的detailsList變量存儲在$rootScope ，然后在模板中使用{{details[detailsList].name}} 。 更新detailsList在MainController的相同間隔內。 請勿為此使用兩個單獨的間隔，因為它們是同時運行的，因此您看不到更新。

這是工作中的plunkr演示 。

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);
});