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

【问题标题】：Problem with outputting data with AngularJS on HTML在 HTML 上使用 AngularJS 输出数据的问题
【发布时间】：2019-07-20 01:30:46
【问题描述】：

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

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

任何帮助都会很棒，谢谢

编辑

这是我以前的版本，它在其中工作：

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

【问题讨论】：

标签： javascript html angularjs angularjs-ng-repeat

【解决方案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
}
];

你可以试一试吗？

【讨论】：

您好，感谢您的回复。我已经尝试过了，不幸的是它不起作用。我有一个以前的版本，使用与我发布的相同格式，它正在工作，只是在我在这个应用程序上尝试时不起作用**现在只发布以前的版本
所以基本上它没有显示任何数据？控制台有错误吗？
完全没有错误，这很奇怪，我刚刚在帖子中添加了网页图片。但是答案是肯定的，之前做过几次，只是不确定为什么现在不起作用

【解决方案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 - 在 js 中到 booking.taxiRoute 在 html 中。

如果这有帮助，请告诉我。

【讨论】：

您好，感谢您抽出宝贵时间回复。我已经将 ng-app='ItsApp' 包含在 html 标记中，所以应该没问题。函数没有关闭的原因只是因为我取出了一个sn-p，只是语法错误快速关闭它，抱歉我尝试匹配属性但它不起作用，目前booking.route现在是js中的路由文件等。
@Davide 在上面的代码中您声明您的应用程序名为itsBooking，但在此评论中您声明ng-app='ItsApp'。这只是一个提示。
我有一个带有 angular.module("itsApp", ["itsBooking"]) 的 .js 文件，我假设我在 html ng-app 标签和 itsBooking 控制器文件中使用了 itsApp？跨度>
@Davide 您可以先尝试将其作为单独的应用程序“itsBooking”运行，而不是将其用作依赖项。你能检查一下这对你有用吗？我确实尝试运行我发布的代码，它对我来说运行良好。
@Apurva 我有点困惑，我已将 myApp 更改为 itsBookings 并将您的代码作为唯一代码粘贴到控制器中，但它仍然没有显示