Question

这是我的app.js

var countryApp = angular.module('countryApp', ['ngRoute']);
countryApp.controller('testController', ['$scope', '$http', '$location', function ($scope, $http, $location) {
  $http({
    url: 'countries.json',
    method: "GET",
    headers: {'Content-Type': 'application/json'}
  }).success(function (data) {
    $scope.details = data;
    console.log("data---------->", $scope.details);
  }).error(function (data) {
    console.log("data error---------->", $scope.details);
  })
}]);

countryApp.config(['$routeProvider', function ($routeProvider) {
  //$httpProvider.interceptors.push('httpErrorInterceptor');
  $routeProvider.when('/countrydetails', {
    templateUrl: 'partials/country-detail.html',
    //controller: 'testController',
  }).otherwise({
    redirectTo: '/countrylist',
    templateUrl: 'partials/country-list.html',
    controller: 'testController',
    });
}])

countryApp.factory('testService', ['$scope', '$http', function ($scope, $http) {
  return { }
}])

这是我的countries-list.html

<h1>COUNTRIES</h1>
<select>
  <option ng-repeat="country in details | orderBy:'name'">
    <a>{{country.name}}</a>
  </option>
</select>
<a href="#/countrydetails"><button >click</button></a>

按钮点击时，我需要在下一页上获取国家/地区名称。为此，我有一个名为country-details.html的html页面我该怎么做才能在这个html页面中获得该国家的名称。

Answer 1

设置你喜欢的路线

$routeProvider.when('/countrydetails/:name', {
templateUrl: 'partials/country-detail.html',
});

更改 html 之类的内容。

 <a ng-href="#/countrydetails/{{country.name}}">
<button >click</button></a>

最好实现命中控制器功能以使用正确的路线，但这是你真正需要的。

Answer 2

你可以像这样制作href： <a href="#/countrydetails/{{contry.name}}">

将路线设为 $routeProvider.when('/countrydetails/:name', {

然后在下一页的Controller中，注入$routeParams

controller('countryDetailsController', function ($scope, $routeParams) { 
   $scope.countryName = $routeParams.name
});

然后，在您的HTML中只需使用{{countryName}}

Answer 3

创建了一个模拟您的场景的plunker。请检查这是否有帮助。 http://plnkr.co/edit/hV16OB?p=preview

这一部分非常重要。 $routeProvider.when('/countrydetails/:countryName',

我无法在angularJS的下一页上获得所选项目的下拉列表

3 个答案: