CODEWITHSUNDEEP
javascripthtmlangularjs
butYouDontLookLikeADeveloper
butYouDontLookLikeADeveloper

Reputation: 337

pass an ID to next page after clicking a link in angularjs

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';
      });
  }
})

Upvotes: 1

Views: 3068

Answers (1)

t0mpl
t0mpl

Reputation: 5025

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;

Upvotes: 1

Related Questions