Question

我是棱角分明的新手。尝试使用Angular Routing在列表页面和详细信息页面上显示数据库中的数据。我在数据库中有一个表呼叫员工，我正在尝试使用Angular Js $ http服务来显示员工列表，用户可以单击每个列表来查看详细信息。我在table.html页面上列出了结果，但在view.html页面上没有结果。有什么帮助吗？感谢

这是角度脚本。

    /* App Module */
var employeeApp = angular.module('employeeApp', [
  'ngRoute',
  'tableControllers'
]);

/* Controllers */

var tableControllers = angular.module('tableControllers', []);

tableControllers.controller('ListCtrl', ['$scope', '$http',
  function($scope, $http) {
    $http.get('data/json.php').success(function(data) {
      $scope.employees = data;
    });
  }]);

tableControllers.controller('DetailCtrl', ['$scope', '$routeParams', '$http',
  function($scope, $routeParams, $http) {
    $http.get('data/json.php').success(function(data) {
      $scope.employee = data;
    });
  }]);

employeeApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/page', {
        templateUrl: 'pages/table.html',
        controller: 'ListCtrl'
      }).
      when('/page/:employee_id', {
        templateUrl: 'pages/view.html',
        controller: 'DetailCtrl'
      }).
      otherwise({
        redirectTo: '/page'
      });
  }]);

这是索引文件

<!DOCTYPE html>
  <html lang="en" ng-app="employeeApp">
  <head>
    <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Graphic Editor</title>
     <link href="css/bootstrap.css" rel="stylesheet">
     <link href="css/custom.css" rel="stylesheet">
     <script src="js/angular.min.js"></script>
     <script src="js/angular-route.js"></script>
     <script src="js/app.js"></script>
  </head>
  <body>
  <header></header>
  <section>
    <div class="container">
        <!-- angular templating -->
        <!-- this is where content will be injected -->
        <div ng-view></div>
    </div>
  </section>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
  <script src="js/bootstrap.min.js"></script>
  </body>
</html>

这是视图页面

<table width="500" class="table table-striped table-bordered">
<tbody>
    <tr>
        <td width="22%">Name</td><td width="22%">{{employee.firstName}} {{employee.firstName}}</td>
    </tr>
    <tr>
        <td>employee</td><td>{{employee.employee}}</td>
    </tr>
    <tr>
        <td>Address</td><td>{{employee.addressLine1}} {{employee.addressLine2}}</td>
    </tr>
    <tr>
        <td>Action</td><td><a href="#/page/{{employee.employee_id}}">Edit</a></td>            
    </tr>
  </tbody>
</table>

<p>{{caption}}</p>

Angular Js未在详细信息页面上显示数据

0 个答案: