在数组中有任何项目之前，在 ng-repeat 模板中查找元素的数量？

Question

我们正在使用 AngularJS，我有一个这样的服务器生成模板：

<div ng-repeat='data in lazyContentFactory.items'>
    <my-element data="data[0]"></my-element>
    <my-element data="data[1]"></my-element>
    <my-element data="data[2]"></my-element>
</div>

在这里，每个项目都有一个属性数据，它是一个数组，其中包含来自服务器的动态设置的 post 个数。在这种情况下，我需要从 API 中获取 3 个数据项。此数字可能会有所不同，具体取决于服务器上的设置。

当 lazyContentFactory.items 的长度为 0 时，如何找到 "my-element" 元素的数量，以便知道我需要获取多少数据项？这些元素未在 DOM 中呈现，因此我似乎无法使用 angular.element.find 获取它们，也无法通过指令预编译或 post 函数注册它们。

这可能吗？我的问题够清楚吗？

Answer 1

靠Angular！使用另一个 ng-repeat:

<div ng-repeat='data in lazyContentFactory.items'>
    <my-element ng-repeat='subdata in data' data="{{subdata}}"></my-element>
</div>

这是一个基本的 JSFiddle demo 展示它的实际效果
嵌套 ng-repeat 是 angular 变得非常强大的领域之一

Answer 2

随着我对 Angular 执行代码的方式了解得更多，我发现了一种可以在名为 .运行的模块上调用的方法。这些 run-blocks 将在创建所有服务后执行，但在我的情况下最重要的是，在 DOM 被 Angular 更改之前执行，因此我的所有初始元素都可以访问。因此，在运行-block 中，我可以在隐藏之前计算所有将被 ng-repeat 指令隐藏的元素！

注意：这不是 Angular 的最佳使用，因为我必须在 Angular 遍历 DOM 之前检查 DOM 中的元素。也许可以使用另一个框架，因为我们确实需要后端的灵活性。

angular.module('myModule',[])
    .run(function (elementService, cacheService, myConstants) {
        var initialNrOfMyElements = elementService
            .getNrOfElementsInDomWithAttribute('my-element', 'some-attr');
        cacheService.put(
            myConstants.initialNrOfMyElements,
            initialNrOfMyElements
        );

在数组中有任何项目之前，在 ng-repeat 模板中查找元素的数量？

Find number of elements inside ng-repeat template, before I have any items in the array?

javascript

angularjs

angularjs-directive