Question

我有一个投资组合网站，其中MAIN显示来自projects.json的项目列表，然后每个项目都有自己的页面workTemplate.html，从titleX.json文件中提取数据。

主要项目清单（点击） - ＆gt; Title.json（每页）[上一个/下一个按钮] - ＆gt;另一个Tile.json

如何使用每个workId页面中的上一个/下一个按钮循环浏览每个工作页面？

我已设置了一个Plunker来显示我的设置：http://plnkr.co/edit/zU9bz73Iv4ya0MIAE3f5?p=preview

我想我需要使用工厂：

      query: {method:'GET', params:{workId:'works'}, isArray:true}

但不确定。

我的Plunker不是100％正常工作，但你明白了。最感谢提前！

Answer 1

假设您拥有整个项目的列表。一旦您获得main.html＆＃39; controller中的列表，您就可以拥有一个数组（或服务，稍后），您可以在其中维护所有work.id的列表

假设您的列表位于var myList = ['test1','test2','test3'];。您可以从work.id获取当前$stateParams.workId。从myList获取当前work.id的索引到currentWorkIndex。

假设您目前位于test2，那么之前的位置为test1，接下来就是test2获取其索引。

prevWorkInd = (currentWorkIndex !== 0) ? currentWorkIndex - 1 : 0;
nextWorkInd = (currentWorkIndex !== l - 1) ? currentWorkIndex + 1 : l - 1; //l is length of myList

现在你有上一个和下一个监视器的索引。找到了work。存储它像： $scope.prevWorkId = myList[prevWorkInd]; $scope.nextWorkId = myList[nextWorkInd];

在您的HTML中，您可以使用上一页和下一页

<a ui-sref="work({workId:prevWorkId})">Previous</a> <a ui-sref="work({workId:nextWorkId})">Next</a>。

现在，您可以使用将返回整个列表的服务，而不是将myList存储在控制器中。我相信这不是你将使用它的唯一地方。

编辑：这里是soln的Plunk。请注意，此代码仍可以进行优化。

AngularJS＆gt;使用Next，Previous按钮循环访问JSON文件

1 个答案: