5

我在使用 循环遍历对象列表时创建（父）行ng-repeat。我还创建了一个隐藏行。可见行包含一些基本数据，隐藏行（详细信息）包含所有数据。我希望在单击父行时可以看到详细信息行。而且我只想在详细信息行可见时加载数据。另外，一旦已经加载了一行的详细信息，我就不想再去服务器了。

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

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

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

那么，实现这一目标的方法是什么？有人可以指出我正确的方向吗？

4

1 回答 1

13

实现此目的的一种方法是在ngInclude中使用变量并在单击父行时设置它。

这是一个示例小提琴，如果您使用 Chrome（或其他浏览器）的网络选项卡，您可以看到在单击某个项目之前不会请求包含中的 url。

<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>

在高层次上，这里发生的是：

  1. url最初没有设置任何东西，所以ng-include没有什么可以获取的
  2. 单击父项时，将url变量设置为使用ng-click（您可以使用范围函数来更好地控制 url，如本例所示）
  3. 该范围内的变量现在已设置，因此ng-include可以在单击时获取 url

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

于 2013-06-07T14:16:31.070 回答