Javascript AngularJS$http.get with ngRoute如何列出详细信息
也许有人会帮助我。我用angularjs编写了一个应用程序,我有一个名为list.html的文件,它从jsonplaceholder检索帖子列表,并列出它们,还有一个指向帖子详细信息的链接。在$routeParams中,我传递所选对象的id并将其拾取。不幸的是,我不知道如何下载帖子的详细信息并将其显示在details.html文件中。例如,如果我想删除某些内容,我会将$scope.deletePost作为函数编写,并给出一个id,但我不知道如何列出详细信息 //routing.jsJavascript AngularJS$http.get with ngRoute如何列出详细信息,javascript,angularjs,ngroute,angularjs-http,Javascript,Angularjs,Ngroute,Angularjs Http,也许有人会帮助我。我用angularjs编写了一个应用程序,我有一个名为list.html的文件,它从jsonplaceholder检索帖子列表,并列出它们,还有一个指向帖子详细信息的链接。在$routeParams中,我传递所选对象的id并将其拾取。不幸的是,我不知道如何下载帖子的详细信息并将其显示在details.html文件中。例如,如果我想删除某些内容,我会将$scope.deletePost作为函数编写,并给出一个id,但我不知道如何列出详细信息 //routing.js var my
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>
{{data}}
//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>
-
蒂图什:{{post.title}
您只需使用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;
})
});
很好!谢谢:)