Создать функцию для обновления таблицы - PullRequest
Новая
       7

Создать функцию для обновления таблицы

0 голосов
/ 20 октября 2019

Я пытаюсь написать функцию, которая используется в ng-change в файле Pug в выпадающем списке.

Эта функция должна обновить таблицу (id = availableFlight), чтобы показать списоквсе рейсы, в которых пункт назначения совпадает с выбранным в раскрывающемся списке.

Это с использованием Angular, который я раньше почти не использовал, а HTML - PUG.

Вот то, что у меня есть до сих пор

JS-файл: 

angular.module("app",[]).controller("myFlight",function($scope){

  $scope.destinations = ["Florida", "New York", "Venice"];

  $scope.flights = [
      {
        company: "British Airways",
        company: "EasyJet",
        company:  "Virgin"

      },
      {
        destination: "Florida",
        destination: "New York",
        destination: "Venice"
      },
      {
        class: "Economy",
        class: "Business",
        class: "Business"
      },
      {
        price: "£2000",
        price: "£4000",
        price: "£6000"
      },
      {
        airMiles: "3000",
        airMiles: "1200",
        airMiles: "9000"
      }

    ];


    // the function I am trying to create -

    $scope.updateTable = function(){


  }

  });

Вот файл PUG - 

div(ng-app='app', ng-controller='myFlight')
  .container
    h1 My Flight
    h3 Select a destination:
    select(ng-model="selectedName" name="destinationList" id='destinationList' ng-change='updateTable()' ng-options="destination for destination in destinations") 
      option(value='FL') Florida
      option(value='NY') New York
      option(value='VCE') Venice
    table.table(id='availableFlight')
      thead
        tr
          th Destination
          th company 
          th class 
          th price 
          th airMiles 

      tbody(ng-repeat='flight in destinationfilter' ng-show='destinationfilter')
        tr

          td {{flight.destination}}
          td {{flight.company}}
          td {{flight.class}}
          td {{flight.price | currency:"£"}}
          td {{flight.airMiles}}
          td
            a
              i.fas.fa-long-arrow-alt-right(ng-click='selectedFlight(flight)')


    h1 Flight Selected

      h5 {{flightSummary.destination}}
      p Company: {{flightSummary.company}}
      span how many passengers : 
      input(id="number" min=1 type="number" ng-model='howMany' ng-change='updatePrice()')
      p total price {{priceTotal |currency:"£"}}

Любая помощь будет принята с благодарностью. Большое спасибо

1 Ответ

0 голосов
/ 20 октября 2019

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

Если вы структурируете его таким образом, у вас будет многоболее легкое время с вашими петлями / доступом: 

[
      {
        company: "British Airways",
        destination: "Florida",
        class: "Economy",
        price: "£2000",
        airMiles: "3000",
      },
      {
        company: "EasyJet",
        destination: "Venice"
        class: "Business",
        price: "£4000",
        airMiles: "1200"
      }
]

Затем вы можете использовать угловые фильтры , чтобы ограничить данные только тем, что вы хотите.

Также обратите внимание, что этос учетом регистра, и запись в исходном сообщении Company не эквивалентна company - это, безусловно, приведет к ошибкам позже.

...