I have a list of places that I am printing list of places, and the idea is when the user clicks on the place it takes the user to another page where the details of the place can be viewed. How can I achieve this?
HTML:Page1
<li ng-repeat="place in places.places">
<a href="#/uncatdetails" ng-click="showplace(place.placeID)">{{place.name}}</a>
</li>
Page2:
<table ng-controller="UncatCtrl">
<tr>
<td>Name: </td><td>{{place.place.name}}</td>
</tr>
<tr>
<td>placeID: </td><td ng-model="PlaceID">{{place.place.placeID}}</td>
</tr>
</table>
Angular:
myApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/uncatdetails', {
templateUrl: 'templates/uncatpost.html',
controller: 'UnCatPostCtrl'
})
}])
.controller('UnCatPostCtrl', function ($scope, $http) {})
.controller('UncatCtrl', function ($scope, $http) {
$http.get('http://94.125.132.253:8000/getuncategorisedplaces').success(function (data, status, headers) {
$scope.places = data;
console.log(data);
$scope.message = 'Uncategorised places';
})
$scope.showplace = function(placeID) {
$http({method: 'GET', url: 'http://94.125.132.253:8000/getitemdata?ID=' + placeID}).
success(function(data, status, headers, config) {
$scope.place = data; //set view model
console.log(data);
console.log(placeID);
$scope.view = 'templates/detail.html';
})
.error(function(data, status, headers, config) {
$scope.place = data || "Request failed";
$scope.status = status;
$scope.view = 'templates/detail.html';
});
}
})
try it
.when('/uncatdetails/:id', {templateUrl: 'ftemplates/uncatpost.html',
controller: 'UnCatPostCtrl'})
in your HTML
ng-href="uncatdetails/{{place.placeID}}"
in your controller, add this inject $routeParams
$scope.id = $routeParams.id;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.