使用Angular进行动态路由 - 如何使用这个JSON？

我目前正在尝试从Angular的http方法中从API中获取一些JSON。我可以很好地检索数据，但是我无法定位特定的ID - 要清楚我想要做的是说/＃/ work/1和/＃/ work/2，并且能够使用与该ID相关的数据。我已经考虑使用$ routeParams来做到这一点，但我只得到了。使用Angular进行动态路由 - 如何使用这个JSON？

我的JSON看起来就像这样：

[ 
{ 
    "id": 1, 
    "title": "New post", 
    "body": "oh yeah" 
}, 
{ 
    "id": 2, 
    "title": "another one", 
    "body": "test test test", 
} 
]

，我试图动态路由到每个ID上，建立在我的配置应用程序，像这样：

myApp.config(function($routeProvider){ 
    $routeProvider. 
    when('/',{ 
    templateUrl: 'partials/home', 
    controller: 'mainController' 
    }). 
    when('/work/:id', { 
    templateUrl: 'partials/project', 
    controller: 'postController' 
    }) 
});

这在联我的观点是这样的，因为我正在使用ng-重复这个视图的所有数据成功地被打印 - 它贯穿我的JSON罚款

<div class = "images" ng-repeat = 'data in projects"> 
    <a href = "#/work/{{ data.id }}"> 
    <p> {{ data.title }} </p> 
    </a> 
</div>

和我的控制器设置这样的，你可以看到我打电话我厂以使HTTP请求这里定义一个函数：

var postController = angular.module('postControllers', []); 

postControllers.controller('projectController', ['$scope', '$routeParams', 'workPost', 
    function($scope, $routeParams, workPost) { 
    $scope.projectID = $routeParams.id; 
    workPost.getData().success(function(data){ 
    $scope.data = data; 
    }); 
}]);

所以我的工厂设像这样：

var workServices = angular.module('workServices', ['ngResource']); 

projectServices.factory('workPost', function($http) { 
    return { 
    getData: function() { 
     return $http({ 
     url: 'somelink/todata.json', 
     method: 'GET' 
     }) 
    } 
    } 
});

最后我试图访问与该ID在我看来，像这样相关的数据：

<p> {{ data.body }} </p>

这是不行的，但是它的重复或指定我想要的数组中的项目（如数据[1] .title）确实

点击href将我正确地路由到＃/ work/id，所以我的配置很好。我只是不确定如何获得仅与该ID关联的相关数据（即标题，正文）？我想这可能是我的JSON结构的方式，也许我需要为每个对象嵌套参数下的？

感谢您的期待。

来源

2016-01-23 biscuit_

当你做$scope.data = data;，要设置对象的整个数组范围的数据变量。

你想要做的是找到id匹配数组中的路由参数ID的对象，并将该对象设置为作用域的数据。您可以使用Array.prototype.find()来做到这一点。

workPost.getData().success(function(data){ 
    $scope.data = data.find(function (element) { 
     return element.id === $scope.projectID; 
    }); 
});

来源

2016-01-23 21:45:35 Prashant

不错，我想我必须以某种方式循环，但这是一个非常干净的方式，谢谢！ –

你的问题是你只使用一个端点，这是一个静态资源文件，其中包含所有数据。

您需要遍历该数据，并通过匹配$routeParams值的对象数组中的属性来过滤掉所需的数据。

当你找到匹配它分配给范围

来源

2016-01-23 21:16:17 charlietfl

使用Angular进行动态路由 - 如何使用这个JSON？

回答

相关问题