Question

这可能很容易，不知道。但我只用节点/快速后端完成了这个。但不完全是如何做到这一点，只有前端和json文件，我的数据。现在它显示了我所有帖子的列表，但我希望得到唯一的帖子：点击按钮时的ID。

一个简单的posts.json文件：

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???
    } }

这是我的app.js文件：

<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-->

我的partial-home.html中的一些代码

{{1}}

我知道这不是mvc模式，但只是想做到这一点非常简单。之前只使用mongoose节点后端完成此操作。所以希望一些想法有所帮助。感谢。

Answer 1

您可以使用$ routeParams从您的路线中获取ID，然后将其用作$ http请求网址中的变量。在获取相同的sourse.json文件时，您可以使用该ID仅将正确的帖子分配给您的视图变量

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

从AngularJS中的json文件中获取单个帖子ID

1 个答案: