AngularJS의 json 파일에서 단일 게시물 ID 가져 오기

이것은 아마도 쉽지 않을 수도 있습니다. 하지만 나는 노드/익스프레스 백엔드로이 작업을 수행했습니다. 하지만 내 데이터가있는 프론트 엔드와 json 파일에서만이 작업을 수행하는 방법을 알지 못합니다. 지금은 내 모든 게시물의 목록을 보여주고 있지만 버튼을 클릭하면 고유 한 게시물 : ID를 얻고 싶습니다.AngularJS의 json 파일에서 단일 게시물 ID 가져 오기

간단한 posts.json 파일 : 여기

[{ 
    id: 1, 
    title: 'Simple title1', 
    content: 'Sample content...', 
    permalink: 'simple-title1', 
    author: 'Peter', 
    datePublished: '2012-04-04' 
}, { 
    id: 2, 
    title: 'Simple title2', 
    content: 'Sample content...', 
    permalink: 'simple-title2', 
    author: 'Peter', 
    datePublished: '2012-05-04' 
}, { 
    id: 3, 
    title: 'Simple title3', 
    content: 'Sample content...', 
    permalink: 'simple-title3', 
     author: 'Thomas', 
    datePublished: '2012-06-04' 
}]

내 app.js 파일입니다

var routerApp = angular.module('routerApp', ['ui.router']); 

routerApp.config(function($stateProvider, $urlRouterProvider) { 

$urlRouterProvider.otherwise('/home'); 

$stateProvider 




.state('home', { 
    url: '/posts', 
    templateUrl: 'partial-home.html', 
    controller: function($scope, $http){ 
    $http.get('posts.json') 
    .success(function(data){ 
    $scope.posts = data; 
    }); 
    } 
}) 

      .state('viewdetails',{ 
    url:'/posts/:id/:permalink', 
    templateUrl: 'view_details.html', 
    controller: function($scope, $http){ 
    $http.get('source.json') 
    //get a single post here??? 
    } }

그리고 내 부분 home.html을의 코드의 일부

<div class="row" style="margin-left:50px"> 
    <!--row left--> 
    <div class="col-xs-8 col-sm-4 col-md-3 col-lg-5 box-background" ng-repeat="post in posts"> 
    <!--column 1 left--> 
    <div class="col-md-4 img-space"> 
     <img class="img-circle" alt="Bootstrap Image Preview" src="{{prov.picture}}" /></div> 
    <div class="col-md-4"> 
     <h4>{{post.author}}</h4> 
     <p class="text-grey"> 
     {{post.content}} 
     </p> 
    </div> 
    <a ui-sref="posts/:id" class="btn btn-primary btn-color" style="width:100%">View details</a> 
    </div> 
    <!--end column 1 left--> 
</div> 
<!--end row left-->

나는 이것이 mvc 패턴이 아니라는 것을 알고 있지만 정말 간단하게하고 싶다. 이전에 몽구스, 노드 백엔드 만 사용했습니다. 그래서 몇 가지 아이디어가 도움이되기를 바랍니다. 감사합니다. .

출처

2016-07-15 user3503728

$ routeParams를 사용하여 경로에서 ID를 얻은 다음이를 $ http 요청 URL의 변수로 사용합니다. 같은 sourse.json 파일을 가져 오는 경우에만

https://docs.angularjs.org/api/ngRoute/service/ $ routeParams

보기 변수에 올바른 포스트를 지정하려면 해당 ID를 사용할 수 있습니다

출처

2016-07-15 12:04:28 johan

AngularJS의 json 파일에서 단일 게시물 ID 가져 오기

답변

관련 문제