Question

使用ng-repeat循环访问对象列表时，我会创建（父）行。我还创建了一个隐藏的行。可见行包含soms基本数据，隐藏行（detail）包含所有数据。我希望在单击父行时可以看到详细信息行。而且我只想在细节行变得可见时加载数据。此外，一旦已加载行的详细信息，我不想再次访问服务器。

我为详细信息视图创建了一个部分，因此我的代码如下所示：

<div ng-include="'/Customer/View'"></div>

当然我可以找到/Customer/View/12，但是即使没有请求，也会加载所有数据。

那么，完成此任务的方法是什么？有人能指出我正确的方向吗？

Answer 1

您可以通过ngInclude使用变量并将其设置为点击父行来实现此目的。

Here is a sample fiddle如果您使用Chrome（或其他浏览器）的网络标签，则可以看到在您点击某个项目之前不会请求包含中的网址。

<div ng-repeat="item in items" ng-click="url = item">
    <span ng-hide="url">Click to load</span>
    <span ng-show="url">Loaded item {{url}}</span>
    <div ng-include="url"></div>
</div>

在这里，正在发生的事情是：

url最初未设置为任何内容，因此ng-include无法获取
点击父项时，使用url将ng-click变量设置为某个内容（您可以使用范围函数来更好地控制网址，如this example中所示）
现在设置了该范围内的变量，以便ng-include可以获取点击时请求的网址

注意：您不必在javascript中声明url变量，因为ngRepeat为您循环的每个项目创建一个新范围，因此设置变量的点击操作只会影响当前你正在使用的范围。

在Angular中为ng-include延迟加载数据的首选方法是什么？

1 个答案: