Проблема с выводом данных с AngularJS на HTML - PullRequest
Новая
       5

Проблема с выводом данных с AngularJS на HTML

0 голосов
/ 26 февраля 2019

В настоящее время я пытаюсь понять, какую ошибку я допустил при написании кода.Я просто пытаюсь получить начальные значения массива, чтобы показать, где будут находиться данные таблицы, но мне не повезло.

Вот раздел 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")
    }};

Ответы [ 2 ]

0 голосов
/ 26 февраля 2019

Вы можете попробовать заменить его следующим кодом: 

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">

Не уверен, где вы добавили ng-app в html, но это важно здесь.Кроме того, еще одна проблема, которую я обнаружил, заключалась в том, что функция на контроллере не была закрыта должным образом.

Аналогично, вы не правильно указали свойства: route - в js до booking.taxiRoute в html.

Дайте мне знать, если это поможет.

0 голосов
/ 26 февраля 2019

Эта область выглядит так, как будто она содержит данные типа 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
}
];

Не могли бы вы попробовать?

...