我目前正在尝试使用Angular JS创建搜索页面。现在我正在尝试测试包含结果的表的代码我创建了一个测试列表，该列表将被抓取并放置在表中。问题是我的代码似乎不起作用。每次我尝试运行代码时，表只包含标题和包含 {{element}} 的行。以下是我正在使用的代码。我目前有两个控制器，一个用于收集搜索数据的表单，另一个用于控制包含搜索结果的表的内容。
HTML代码：
<!DOCTYPE html>
<html data-ng-app="agentOnlineApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular.min.js"></script>
<script type="text/javascript" src="jscripts/agentSearch.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<!-- <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script> -->
<script type="text/ng-template"></script>
</head>
<body>
<section id="agentSearchInput" class="primarySection">
<h3>Agent Search</h3>
<br>
<form id="agentSearch" data-ng-controller="agentSearchCtrl">
Agent Number: <input Type="text" name="agentNumber" pattern="\w{1}&\d{3}|\d{4}" autofocus data-ng-model="agent.agentNumber"><br>
<br>
-- Or --
<br>
<br>
Agent Name: <input Type="text" name="agentName" placeholder="John Doe" size="25" data-ng-model="agent.agentName" >
Type: <input list="type" data-ng-model="agent.agentType">
<datalist id="type">
<option value="TRAC" >
</datalist>
State: <input list="state" data-ng-model="agent.agentState">
<datalist id="state">
<option value="State" >
</datalist>
District: <input list="district" data-ng-model="agent.agentDistrict">
<datalist id="district">
<option value="1" >
</datalist><br>
<br>
<br>
<button type="button" class="btn btn-primary" data-ng-click="agentSearch()" name="AgentSearch">Search</button>
</form>
</section>
<section id="agentSearchOutput" >
<table id="agentTable" class="agentTable" data-ng-controller="agentSearchListCtrl" >
<thead>
<tr>
<th>Agent Number</th>
<th>Agent Name</th>
<th>Agent Type</th>
<th>State</th>
<th>District</th>
</tr>
</thead>
<tbody id="AgentTableBody">
<tr data-ng-repeat="agent in agentSearchResults">
<td><a href="' {{agent.agentNumber}} '">{{agent.agentNumber}}</a></td>
<td>{{agent.agentName}}</td>
<td>{{agent.type}}</td>
<td>{{agent.state}}</td>
<td>{{agent.district}}</td>
</tr>
</tbody>
</table>
</section>
</body>
</html>
JS代码：
var agentOnlineApp = angular.module('agentOnlineApp', []);
//this controller is for the agent search form and search button
agentOnlineApp.controller('agentSearchCtrl', function($scope)
{
//$scope.tableHide = true;
//$scope.toggle = function(){
// $scope.tableHide = !$scope.tableHide;
//}
});
//this controller controls the contents of the AgentSearchTable
agentOnlineApp.controller('agentSearchListCtrl', function($scope)
{
$scope.agentSearchResults = [{agentNumber: "1234", agentName: "Doe, John", type:"TRAC", state: "MO", district: "03"},
{agentNumber: "4567", agentName: "Doe, Jane", type:"TRAC", state: "IL", district: "01"},
{agentNumber: "4789", agentName: "Nobody, Mark", type:"TRAC", state: "KS", district: "02"}
];
});