创建一个函数来更新一个表

Question

我正在尝试在选择下拉菜单中的 Pug 文件中编写一个用于 ng-change 的函数。

此函数需要更新表 (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:"£"}}

任何帮助将不胜感激。 非常感谢

Answer 1

你的 JSON 结构不正确，这将导致许多下游问题，即使你现在可以让它工作，也会迫使你重写它。

如果你像这样构造它，你的循环/访问会更容易：

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

然后，您可以使用 Angular filters 将数据限制在您想要的范围内。

另外请注意，这是区分大小写的，并且您原始帖子中的条目Company 不等于company - 这肯定会在以后导致错误。