javascript - 创建一个函数来更新一个表
问题描述
我正在尝试编写一个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:"£"}}
任何帮助将非常感激。非常感谢
解决方案
你的 JSON 结构不正确,这将导致许多下游问题,即使你现在可以让它工作,也会迫使你重写它。
如果你像这样构造它,你的循环/访问会更容易:
[
{
company: "British Airways",
destination: "Florida",
class: "Economy",
price: "£2000",
airMiles: "3000",
},
{
company: "EasyJet",
destination: "Venice"
class: "Business",
price: "£4000",
airMiles: "1200"
}
]
然后,您可以使用 Angular过滤器将数据限制在您想要的范围内。
另请注意,这是区分大小写的,并且您原始帖子Company
中的条目不等同于company
- 这肯定会在以后导致错误。
推荐阅读
- c# - C# - 如何根据代码列表对两个值求和
- javascript - 从数组中删除重复的对象但也会增加数量
- gnuplot - 背景颜色 - 图表消失
- flutter - 当 Draggable 子项的状态发生变化时如何更新 DragTarget?
- javascript - split.js 在 Rails 6 中导致“Uncaught TypeError: Splitting is not a function”
- json - 尝试使用jq在一行上格式化json数据
- python - 如何摆脱 Google Colab 中的以下错误 - 超出 IOPub 数据速率
- clojure - 语法错误 (FileNotFoundException) 无法在类路径上找到 [name].class、[name].clj 或 [name].cljc
- spring-security - 使用没有 JWK 的 Spring Security OAuth 2.0 资源服务器
- python - 在我的 PayPal 服务器端集成中,付款弹出窗口立即关闭。我该如何解决?