使用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？

回答

相關問題