AngularJS $ http.get с ngRoute, как перечислить детали - PullRequest
Новая
       34

AngularJS $ http.get с ngRoute, как перечислить детали

0 голосов
/ 10 июня 2018

Может быть, кто-то мне поможет.Я пишу приложение на angularjs, у меня есть файл с именем list.html, который извлекает список постов из jsonplaceholder и перечисляет их со ссылкой на подробности поста.В $ routeParams я передаю идентификатор выбранного и забираю его.К сожалению, я не знаю, как загрузить детали поста и отобразить их в файле details.html.Например, если я хочу удалить что-то, я пишу, например, $ scope.deletePost как функцию и даю идентификатор, но я не знаю, как составить список деталей.

// routing.js 

var myApp = angular.module('myApp', ["ngRoute"])
myApp.config(['$routeProvider',
    function ($routeProvider) {
        $routeProvider
            .when('/test', {
                templateUrl: '/event/example.html',
                controller: 'exampleController'
            }, null)
            .when('/list', {
                templateUrl: '/event/list.html',
                controller: 'exampleController'
            }, null)
            .when('/test-list', {
                templateUrl: '/test/list.html',
                controller: 'testController'
            }, null)
            .when('/test/:id', {
                templateUrl: '/test/details.html',
                controller: 'testController'
            }, null)
    }
]);

// controller.js 

angular.module('myApp').controller('testController', function ($scope, $http, $routeParams) {
    $http.get('https://jsonplaceholder.typicode.com/posts').then(function (response) {
        $scope.posts = response.data;
    });

    $scope.id = $routeParams.id;


});

// details.html 

<div data-ng-controller="testController">
    {{data}}
</div>

// list.html 

<div data-ng-controller="testController">
    <ul>
        <li ng-repeat="post in posts">
          Tytuł: {{post.title}} <a href="#!test/{{post.id}}" >Show</a>
        </li>
    </ul>
</div>

1 Ответ

0 голосов
/ 10 июня 2018

Проверьте этот планер .

Вам просто нужно передать детали, используя ng-href, а затем поймать контроллер, используя $routeParams.Я надеюсь, что это поможет вам с тем, что вы искали. 

var app  = angular.module( 'mainApp', ['ngRoute'] );

 app.config( function( $routeProvider ) {

 $routeProvider
 .when( '/main', {
    templateUrl: 'list.html',
    controller: 'listCtrl'
  })
  .when('/detail/:id', {
    templateUrl: 'detail.html',
    controller: 'detailCtrl'
  })
  .otherwise({
    redirectTo: '/main'
  });
});

app.controller( 'listCtrl', function( $scope, $http) {
    $http.get('https://jsonplaceholder.typicode.com/posts')
    .then(function(res){
      $scope.data = res.data;
    })

});

app.controller( 'detailCtrl', function( $scope,$http, $routeParams) {
  $scope.id = $routeParams.id;
   $http.get('https://jsonplaceholder.typicode.com/posts/'+$scope.id)
    .then(function(res){
      $scope.data = res.data;
    })
});
...