我目前正在努力理解在编写代码时我犯了什么错误。我只是想让初始数组值显示表数据的位置，但我没有运气。
这是代码的HTML部分;
<body ng-controller="bookingController">
<h1>National Car Pool Company booking page</h1>
<div ng-show="!isEditing">
<form>
<p>Search for bookings <input type="text" ng-model="search"></p>
</form>
<p>
Here are your current bookings;
</p>
<table>
<thead>
<tr>
<th>Taxi ID</th>
<th>Route</th>
<th>Car Size</th>
<th>Is Taxi Full?</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="booking in bookings | filter:search">
<td>{{booking.id}}</td>
<td>{{booking.taxiRoute}}</td>
<td>{{booking.taxiSize}}</td>
<td>{{booking.taxiNoOfSeats}}</td>
<td><a href="" ng-click="remove(Booking)">Remove Booking</a></td>
</tr>
</tbody>
</table>
这是JS文件;
angular.module("itsBooking").controller("bookingController", function ($scope) { // Array of Bookings
$scope.bookings = [
{
id: 1,
route: "October Business Development trip 2020",
size: 9,
noOfSeats: 6
},
{
id: 2,
route: "October Business Development trip 2020",
size: 6,
noOfSeats: 2
}
];
这是网页的图像;
任何帮助都会很棒，谢谢
SM
编辑
这是我之前的版本，它正在运行：
我的HTML文件;
<p>Search for itineraries <input type="text" ng-model="search"></p>
</form>
<p>
Here are your current itineraries
</p>
<table>
<thead>
<tr>
<th>ID</th>
<th>Itinerary Name</th>
<th>Destination</th>
<th>Purpose</th>
<th>Start Date</th>
<th>End Date</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="itinerary in itineraries | filter:search">
<td>{{itinerary.id}}</td>
<td>{{itinerary.itiName}}</td>
<td>{{itinerary.destination}}</td>
<td>{{itinerary.purpose}}</td>
<td>{{itinerary.startDate | date:'dd/MM/yyyy'}}</td>
<td>{{itinerary.endDate | date:'dd/MM/yyyy'}}</td>
<td><a href="" ng-click="remove(itineraryItem)">Remove itinerary</a></td>
</tr>
</tbody>
</table>
和我的JS文件;
angular.module("itsItinerary").controller("itineraryController", function ($scope) { // Array of Itinerarys
$scope.itineraries = [
{
id: 1,
itiName: "October Business Development trip 2020",
destination: "Germany",
purpose: "Work",
startDate: new Date("2020-10-03"),
endDate: new Date("2020-10-10")
},
{
id: 2,
itiName: "November Client-site visit 2020",
destination: "America",
purpose: "Work",
startDate: new Date("2020-11-05"),
endDate: new Date("2020-11-08")
},
{
id: 3,
itiName: "January Scoping visit 2021",
destination: "China",
purpose: "Work",
startDate: new Date("2021-01-15"),
endDate: new Date("2021-01-23")
}};
该范围看起来像是持有JSON类型的数据。根据我的经验，无论如何，我都知道关键必须在“”之间。我修改了相关的代码：
[
{
"id": 1,
"route": "October Business Development trip 2020",
"size": 9,
"noOfSeats": 6
},
{
"id": 2,
"route": "October Business Development trip 2020",
"size": 6,
"noOfSeats": 2
}
];
你能尝试一下吗？
您可以尝试使用以下代码替换：
var app = angular.module("itsBooking", []);
app.controller("bookingController", function($scope) { // Array of Bookings
$scope.bookings = [
{
id: 1,
route: "October Business Development trip 2020",
size: 9,
noOfSeats: 6
},
{
id: 2,
route: "October Business Development trip 2020",
size: 6,
noOfSeats: 2
}
]});
另外，在下面的html中更改：
<body ng-app="itsBooking" ng-controller="bookingController">
不确定你在html上添加了ng-app的位置，但这里很重要。另外，我发现的另一个问题是控制器上的功能没有正确关闭。
同样，您对属性的匹配也不正确：route - in js to booking.taxi route in html。
如果这有帮助，请告诉我。