单击angularjs中的链接后,将ID传递给下一页

时间:2014-08-05 13:05:45

标签: javascript html5 angularjs

我有一个打印地点列表的地方列表,这个想法是当用户点击用户到另一个页面的位置时,可以查看该地点的详细信息。我怎样才能做到这一点?

HTML:第1页

<li ng-repeat="place in places.places">
    <a href="#/uncatdetails" ng-click="showplace(place.placeID)">{{place.name}}</a>
</li>

2页:

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

角:

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

1 个答案:

答案 0 :(得分:1)

试试吧

.when('/uncatdetails/:id', {templateUrl: 'ftemplates/uncatpost.html',
controller: 'UnCatPostCtrl'})
HTML中的

ng-href="uncatdetails/{{place.placeID}}"

在你的控制器中,添加这个注入$ routeParams

$scope.id = $routeParams.id;