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-这肯定会在以后导致错误。

创建一个函数来更新表

1 个答案: