Question

我希望我的头衔不会太混乱。基本上我所拥有的是一个投资组合项目列表，其数据是从JSON文件中收集的。每个投资组合项都有一个网址，可以导航到单个投资组合项目。

以下是JSON的示例：

[
{
     "url": "nutcracker",
    "name": "Nutcracker Main Street Ballet",
     "snippet": "Trifold Playbill",
     "imgurl": "img/nutcracker.jpg",
     "keyword": "trifold brochure folder over foldover folded"},

MORE
]

这是收集数据的控制器：

myApp.controller('ListCtrl', function ($scope, $http) {
  $http.get('items/items.json').success(function(data){
    $scope.pages = data; 
  });

});

在这里，路由：

config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/list', {templateUrl: 'partials/list.html', controller: 'ListCtrl'});
  $routeProvider.when('/:pageUrl', {templateUrl: 'partials/single-item.html', controller: 'ItemCtrl'});
  $routeProvider.otherwise({redirectTo: '/list'});
}]);

现在每个项目组合项都使用'url'数据来指定网址。所以这个项目将提供一个网址：www.mysite.com /＃/ nutcracker。

我想要做的是搜索“胡桃夹子”的网址，然后在JSON数组中找到相应的项目并使用它的数据来填充单个投资组合页面。

我希望这不会太混乱。如果您认为可以提供帮助，请提出问题，但可能无法确定我在寻找什么！

非常感谢！

Answer 1

使用$location.path()访问路径，去掉前导“/”，然后使用路径搜索数组（示例使用$.grep()来执行此操作，因为问题被标记为jQuery）...

myApp.controller('ListCtrl', function ($scope, $http, $location) {
  $http.get('items/items.json').success(function(data){
    $scope.pages = data; 

    var path = $location.path();  // "/nutcracker"
    if (path.length) {
      path = path.substring(1); // "nutcracker"
    }
    // find matching page in pages
    $scope.page = $.grep(pages, function (page) { return page.url === path; })[0];
  });

});

使用AngularJS根据URL从JSON中提取一个数组项

1 个答案: