Question

我目前正在努力了解编写代码时犯了什么错误。我只是想获取初始数组值以显示表数据的位置，但是我没有走运。

这是代码的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
    }
];

这是网页的图片；

Snap of webpage

任何帮助都会很棒，谢谢

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")
    }};

Answer 1

该作用域看起来像是在保存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
}
];

您可以尝试一下吗？

Answer 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，但这很重要。另外，我发现的另一个问题是控制器的功能未正确关闭。

Similary，您对属性的匹配不正确：路由-在js中为 booking.taxiRoute 在html中。

让我知道这是否有帮助。

在HTML上使用AngularJS输出数据的问题

2 个答案: