如何处理从纳克重复生成的列表项点击加载下一页 [英] How to handle item click on list generated from ng-repeat and load next page
问题描述
我在使用NG-重复生成的HTML列表。
＆LT; DIV NG重复=产品在store.products＆GT;
＆所述; A HREF =details.html＆GT; {{product.name}}＆下; / A＆GT;
＆LT; / DIV＆GT;
有关列表中的数据是从JSON数组以这种格式获得了我的app.js：
VAR项目= [
{
名：Nexus 5的
大小：4.95英寸
摄像头：8百万像素
}，
{
名：的Nexus 6
大小：6.0英寸
摄像头：13百万像素
}
];
我想点击列表项，并转到另一个页面显示来自同一个JSON数组各自的细节。我怎么做？一直试图从列表访问索引，并用它来加载下一个页面，但我成功为止。我是新来的角以及JavaScript的。任何中间步骤将是非常有益的。
另外，请注意我用的一个锚标记列表中点击处理。这是做它的理想方式？
请参见这里演示的 http://plnkr.co/edit/qVEhc0KgKjklWCmqKJ4L?p=$p$pview
HTML
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML NG-应用=plunker＆GT; ＆LT; HEAD＆GT;
＆LT;间的charset =UTF-8/＆GT;
＆LT;标题＆GT; AngularJS Plunker＆LT; /标题＆GT;
＆LT;脚本＆GT;的document.write（'＆LT;基本href =+ document.location +'/＆GT;'）;＆LT; / SCRIPT＆GT;
＆LT;链接rel =stylesheet属性HREF =style.css文件/＆GT;
＆所述;脚本数据需要=angular.js@1.2.xSRC =的https：//$c$c.angularjs.org/1.2.25/angular.js数据semver =1.2.25＆GT ;＆LT; / SCRIPT＆GT;
＆所述;脚本数据需要=angular-route@1.2.16数据semver =1.2.16SRC =HTTP：//$c$c.angularjs.org/1.2.16/angular-route.js ＆GT;＆LT; / SCRIPT＆GT;
＆所述; SCRIPT SRC =app.js＆GT;＆下; /脚本＆GT;
＆LT; /头＆GT; ＆LT;身体GT;
＆LT; DIV NG-视图＆gt;＆LT; / DIV＆GT;
＆LT; /身体GT;＆LT; / HTML＆GT;
JS：
VAR应用= angular.module（'plunker'，['ngRoute']）;的app.config（函数（$ routeProvider）{ $ routeProvider.when（'/主'，{
templateUrl：main.html中
控制器：mainController
}）时，（'/细节/：产品名称'，{
templateUrl：details.html
控制器：detailsController
}）。除此以外（{
redirectTo：/主
}）;
}）
.controller（mainController功能（$范围的DataService）{
$ scope.store = {}; //.products $ scope.store.products = dataService.getProducts（）;
}）
.controller（detailsController功能（$范围，$ routeParams，DataService的）{
$ scope.product = dataService.getProductAt（$ routeParams.productName）; }）;
angular.module（plunker）。服务（DataService的功能（filterFilter）{
变种项= [{
名：Nexus 5的
大小：4.95英寸
摄像头：8百万像素
}，{
名：的Nexus 6
大小：6.0英寸
摄像头：13百万像素
}]; this.getProducts =功能（）{
返回的物品;
};
this.getProductAt =功能（_name）{
this.getProducts（）;
返回filterFilter（物品，{
名称：_name
}）[0];
};
}）;（你需要details.html和main.htm中的模板以及）
I have an html list generated using ng-repeat.
<div ng-repeat="product in store.products"> <a href="details.html">{{product.name}}</a> </div>The data for the list is obtained from a json array in my app.js in this format:
var items = [ { "name": "Nexus 5", "size": "4.95 inches", "camera": "8 megapixels" }, { "name": "Nexus 6", "size": "6.0 inches", "camera": "13 megapixels" } ];I want to click on the list item and go to another page showing the respective details from the same json array. How do I do that? Have been trying to access index from the list and use it to load next page, but am unsuccessful so far. I am new to angular as well as javascript. Any intermediate steps will be very helpful.
Also, notice I am handling click on the list using an anchor tag. Is this the ideal way to do it?
解决方案Please see for demo here 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]; }; });(you need details.html and main.htm template as well)
这篇关于如何处理从纳克重复生成的列表项点击加载下一页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
