javascript - 如何在 angularjs 中的每个特定计数后注入(inject)数据

Question

我有一些从数据库中获取的 SQL 数据，我使用带有 ng-repeat 指令的 Angular js 来列出下面的所有行，这是我的代码:

<div class="wrapper">
    <div class="content" ng-repeat="row in rows">
        {{row.someData}}
    </div>
</div>

现在我有一些自定义广告横幅，我想在每 4 行后显示一次，但我不知道如何使用 Angular Js 来实现它，所以请在这里帮助我

Answer 1

除了 Panos K 的方式之外，您可以做的是使用一个标志来检查是否从 Web 服务接收到横幅数据，然后在每已加载第 4 行数据后添加它。因此，对于ng-repeat内有ng-if条件，然后绑定(bind)新的bannerData arry/objects，索引为$index/4 。

检查下面我创建的 Plunker 示例来演示这一点。单击横幅数据按钮进行异步调用以获取横幅数据，然后将其绑定(bind)到使用 ng-repeat 加载的现有数据

<div ng-repeat="x in records track by $index">
    <div class="column">{{x.name}}</div>
    <div class="column">{{x.abbreviation}}</div>
    <div ng-if="isBannerDataAvailable && ($index+1) % 4 === 0" class="banner">
        <p>Banner After every 4th row</p>
        <p> {{showBannerData($index)}} </p>
    </div>
</div>

showBannerData() 可以是:

$scope.showBannerData = function($index) {
    var index = $scope.Math.round(($index + 1) / 4) - 1;
    return $scope.bannerData[index].Banner;
}

<强> Working plunker Example