Question

我有一个使用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数组的相应详细信息。我怎么做？一直试图从列表中访问索引并使用它来加载下一页，但到目前为止都没有成功。我是角度以及javascript的新手。任何中间步骤都会非常有用。

另外，请注意我正在处理使用锚标记单击列表。这是理想的做法吗？

Answer 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生成的列表并加载下一页

1 个答案: