根据上一页中选择的名称获取Json的详细信息(Angular）

Get Json details depending upon the name selected in previous page (Angular)

本文关键字：Json 获取 详细信息 Angular 一页 选择      更新时间：2023-09-26

我有一个问题，根据在其他HTML页面上选择的值获取json数据，不同的控制器为不同的页面提供服务

我的主页由一个表组成，该表通过json数据循环

      <table class="table table-striped">
        <thead>
          <tr>
            <th>Firstname</th>
            <th>Phone</th>
            <th>Time</th>       
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat = 'row in rows'>
          <td><a href="#about/{{row.name}}">{{row.name}}</a></td>
          <td>{{ row.phone}}</td>
          <td>{{row.time}} </td>    
          </tr>
        </tbody>
      </table>

根据从表中选择的姓名，它通过$routeParams被路由到不同的页面，显示所选人员的姓名，但我也想从json 中获得该人员的其他详细信息

http://plnkr.co/edit/iha3M0KThZegme8yKRz9?p=preview

任何帮助都非常感谢

您必须以某种方式在第二页中获取数据。你有几个选项列在我的优先顺序

  1. 制作一个进行http调用的服务，然后缓存Json并将其注入两个控制器
  2. 使持有整个JSON控件的控制器同时具有不同类型的页面
  3. 在另一个控制器中进行另一个http调用，以便您可以访问json

您正在寻找的是服务。这是反映添加服务的代码：

    // create the module and name it scotchApp
var scotchApp = angular.module('scotchApp', ['ngRoute']);
// configure our routes
scotchApp.config(function($routeProvider) {
  $routeProvider
  // route for the home page
    .when('/', {
    templateUrl: 'pages/home.html',
    controller: 'mainController'
  })
  // route for the about page
  .when('/about/:person', {
    templateUrl: 'pages/about.html',
    controller: 'aboutController'
  })
});
scotchApp.service('dataService', function($http) {
  var dataService = {
    getData: function() {
      return $http.get("call_queue.json");
    }
  };
  return dataService;
});

// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope, dataService) {
  // create a message to display in our view
  $scope.message = 'contacts';
  dataService.getData().then(function(response) {
    $scope.rows = response.data
  });
});
scotchApp.controller('aboutController', function($scope, $routeParams, dataService) {
  $scope.message = 'Clicked person name from home page is dispalyed here, but wanted other datails also';
  $scope.person = $routeParams.person;
  dataService.getData().then(function(response) {
    $scope.rows = response.data
  });
});

您可以决定是在每次访问服务时进行$http.get（）调用，还是只进行一次调用并将服务中的数据缓存在您公开的变量中。

相关文章：