如何处理从 ng-repeat 生成的列表单击并加载下一页
Posted
技术标签:
【中文标题】如何处理从 ng-repeat 生成的列表单击并加载下一页【英文标题】：How to handle item click on list generated from ng-repeat and load next page 【发布时间】：2014-12-23 14:23:39 【问题描述】：我有一个使用 ng-repeat 生成的 html 列表。
<div ng-repeat="product in store.products">
<a href="details.html">product.name</a>
</div>
列表的数据是从我的 app.js 中的 json 数组中获取的，格式如下：
var items = [
"name": "Nexus 5",
"size": "4.95 inches",
"camera": "8 megapixels"
,
"name": "Nexus 6",
"size": "6.0 inches",
"camera": "13 megapixels"
];
我想单击列表项并转到另一个页面，该页面显示来自同一 json 数组的相应详细信息。我怎么做？一直在尝试从列表中访问索引并使用它来加载下一页，但到目前为止还没有成功。我是 Angular 和 javascript 的新手。任何中间步骤都会很有帮助。
另外，请注意我正在使用锚标记处理单击列表。这是理想的方法吗？
【问题讨论】：
我对angularjs不是很熟悉，但是你不能在a标签的属性中保存一个item的值吗？ 【参考方案1】：请在此处查看演示http://plnkr.co/edit/qVEhc0KgKjklWCmqKJ4L?p=preview
HTML：
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.25/angular.js" data-semver="1.2.25"></script>
<script data-require="angular-route@1.2.16" data-semver="1.2.16" src="http://code.angularjs.org/1.2.16/angular-route.js"></script>
<script src="app.js"></script>
</head>
<body >
<div ng-view></div>
</body>
</html>
JS：
var app = angular.module('plunker', ['ngRoute']);
app.config(function($routeProvider)
$routeProvider.when('/main',
templateUrl: "main.html",
controller: "mainController"
).when('/detail/:productName',
templateUrl: "details.html",
controller: "detailsController"
).otherwise(
redirectTo: "/main"
);
)
.controller("mainController", function($scope, dataService)
$scope.store = ; //.products
$scope.store.products = dataService.getProducts();
)
.controller("detailsController", function($scope, $routeParams, dataService)
$scope.product = dataService.getProductAt($routeParams.productName);
);
angular.module("plunker").service("dataService", function(filterFilter)
var items = [
"name": "Nexus 5",
"size": "4.95 inches",
"camera": "8 megapixels"
,
"name": "Nexus 6",
"size": "6.0 inches",
"camera": "13 megapixels"
];
this.getProducts = function()
return items;
;
this.getProductAt = function(_name)
this.getProducts();
return filterFilter(items,
name: _name
)[0];
;
);
（你还需要 details.html 和 main.htm 模板）
【讨论】：
以上是关于如何处理从 ng-repeat 生成的列表单击并加载下一页的主要内容，如果未能解决你的问题，请参考以下文章
如何处理从 Gdiplus::DrawArc 返回的零星 OutOfMemory 错误代码？
如何处理从 servlet 中的 Angular 应用程序发送的预检请求？