Javascript 基于当前筛选器筛选源数组,并将其特定值放入ng repeat项
我有一个名为时间表的数组,其中包含所有航班时间表信息。当用户选择出发城市和到达城市时,该数组将按所选城市进行过滤,并在表中输出航班。该表还包含最初源阵列计划没有的返回航班数据列。但是有一个值ret\u flight\u num 我想将返回的航班数据加载到当前行,但仍然不知道如何实现。有什么建议吗Javascript 基于当前筛选器筛选源数组,并将其特定值放入ng repeat项,javascript,angularjs,angularjs-filter,Javascript,Angularjs,Angularjs Filter,我有一个名为时间表的数组,其中包含所有航班时间表信息。当用户选择出发城市和到达城市时,该数组将按所选城市进行过滤,并在表中输出航班。该表还包含最初源阵列计划没有的返回航班数据列。但是有一个值ret\u flight\u num 我想将返回的航班数据加载到当前行,但仍然不知道如何实现。有什么建议吗 var-app=angular.module('flight-schedule',[]); 应用程序控制器('SelectCtrl',函数($scope){ $scope.flights=[ { 城市
var-app=angular.module('flight-schedule',[]);
应用程序控制器('SelectCtrl',函数($scope){
$scope.flights=[
{
城市:“阿什哈巴德”,
目的地:[“阿拉木图”、“阿姆利则”]
},
{
城市:“阿姆利则”,
目的地:[“阿什哈巴德”]
},
{
城市:“阿拉木图”,
目的地:[“阿什哈巴德”]
}
];
$scope.schedules=[{
“来自城市”:“阿什哈巴德”,
“阿拉木图市”:“阿拉木图”,
“航空公司”:“Türkmenhowaýollary DMG”,
“航班号”:“T5-717”,
“飞机”:“B-737-700”,
“副部长日”:5,
“dep_time”:“08-40”,
“着陆时间”:“12-30”,
“返回航班号”:“T5-718”
}, {
“来自城市”:“阿什哈巴德”,
“阿拉木图市”:“阿拉木图”,
“航空公司”:“Türkmenhowaýollary DMG”,
“航班号”:“T5-715”,
“飞机”:“B-737-700”,
“环保日”:7,
“dep_time”:“20-20”,
“着陆时间”:“*00-10”,
“返回航班号”:“T5-716”
}, {
“阿拉木图市”:“阿拉木图”,
“阿什哈巴德市”:“阿什哈巴德”,
“航空公司”:“Türkmenhowaýollary DMG”,
“航班号”:“T5-718”,
“飞机”:“B-737-700”,
“副部长日”:5,
“dep_time”:“14-00”,
“着陆时间”:“16-00”,
“返回航班号”:“T5-715”
}, {
“阿拉木图市”:“阿拉木图”,
“阿什哈巴德市”:“阿什哈巴德”,
“航空公司”:“Türkmenhowaýollary DMG”,
“航班号”:“T5-716”,
“飞机”:“B-737-700”,
“环保日”:1,
“dep_时间”:“01-40”,
“着陆时间”:“03-40”,
“返回航班号”:“T5-717”
}, {
“来自城市”:“阿什哈巴德”,
“城市”——“阿姆利则”,
“航空公司”:“Türkmenhowaýollary DMG”,
“航班号”:“T5-551”,
“飞机”:“B-757-200”,
“环保日”:1,
“dep_时间”:“06-20”,
“着陆时间”:“09-30”,
“返回航班号”:“T5-552”
}, {
“来自城市”:“阿什哈巴德”,
“城市”——“阿姆利则”,
“航空公司”:“Türkmenhowaýollary DMG”,
“航班号”:“T5-715”,
“飞机”:“B-737-700”,
“副部长日”:3,
“dep_时间”:“03-25”,
“着陆时间”:“06-35”,
“返回航班号”:“T5-554”
}, {
“来自城市”:“阿姆利则”,
“阿什哈巴德市”:“阿什哈巴德”,
“航空公司”:“Türkmenhowaýollary DMG”,
“航班号”:“T5-718”,
“飞机”:“B-737-700”,
“环保日”:2,
“dep_时间”:“06-30”,
“着陆时间”:“08-45”,
“返回航班号”:“T5-553”
}, {
“来自城市”:“阿姆利则”,
“阿什哈巴德市”:“阿什哈巴德”,
“航空公司”:“Türkmenhowaýollary DMG”,
“航班号”:“T5-716”,
“飞机”:“B-737-700”,
“副部长日”:3,
“dep_时间”:“08-05”,
“着陆时间”:“10-20”,
“返回航班号”:“T5-551”
}];
});代码>
表格{
边界塌陷:塌陷;
文本对齐:居中;
}
td,th{
边框:1px实心#ddd;
}
格雷先生{
背景色:#ccc;
}
航班时刻表
出发城市:
选择出发城市
所选德帕鲁尔市:{{data.dep_city.city}
抵达城市:
选择到达城市
所选到达城市:{{data.arr_city}
航空公司
航班号
飞机
出发日
出发时间
着陆时间
回程航班号
回程航班起飞日
返程航班起飞时间
返航着陆时间
{{flight.aviacompany}
{{flight.flight_num}
{{飞行.飞机}
{{flight.dep_day}
{{flight.dep_time}
{{飞行.着陆时间}
{{flight.ret_flight_num}
航班时刻表
您可以使用
逻辑很简单:
找到返程航班
获取数据
显示表中的数据
请参阅代码中的注释(在过滤器
部分中)以更好地理解
var-app=angular.module('flight-schedule',[]);
应用程序控制器('SelectCtrl',函数($scope){
$scope.flights=[
{
城市:“阿什哈巴德”,
目的地:[“阿拉木图”、“阿姆利则”]
},
{
城市:“阿姆利则”,
目的地:[“阿什哈巴德”]
},
{
城市:“阿拉木图”,
目的地:[“阿什哈巴德”]
}
];
$scope.schedules=[{
“来自城市”:“阿什哈巴德”,
“阿拉木图市”:“阿拉木图”,
“航空公司”:“Türkmenhowaýollary DMG”,
“航班号”:“T5-717”,
“飞机”:“B-737-700”,
“副部长日”:5,
“dep_time”:“08-40”,
“着陆时间”:“12-30”,
“返回航班号”:“T5-718”
}, {
“来自城市”:“阿什哈巴德”,
“阿拉木图市”:“阿拉木图”,
“航空公司”:“Türkmenhowaýollary DMG”,
“航班号”:“T5-715”,
“飞机”:“B-737-700”,
“环保日”:7,
“dep_time”:“20-20”,
“着陆时间”:“*00-10”,
“返回航班号”:“T5-716”
}, {
“阿拉木图市”:“阿拉木图”,
“阿什哈巴德市”:“阿什哈巴德”,
“航空公司”:“Türkmenhowaýollary DMG”,
“航班号”:“T5-718”,
“飞机”:“B-737-700”,
“副部长日”:5,
“dep_time”:“14-00”,
“着陆时间”:“16-00”,
“返回航班号”:“T5-715”
}, {
“阿拉木图市”:“阿拉木图”,
“阿什哈巴德市”:“阿什哈巴德”,
“航空公司”:“Türkmenhowaýollary DMG”,
“航班号”:“T5-716”,
“飞机”:“B-737-700”,
“环保日”:1,
“dep_时间”:“01-40”,
“着陆时间”:“03-40”,
“返回航班号”:“T5-717”
}, {
“来自城市”:“阿什哈巴德”,
“城市”——“阿姆利则”,
“阿维亚科
$scope.schedules.forEach(function(item, i, arr){
$scope.schedules.forEach(function(item2, i2, arr2){
if(item.ret_flight_num == item2.flight_num && item.city_from == item2.city_to && item2.city_from == item.city_to){
item.day = item2.dep_day;
item.deptime = item2.dep_time;
item.landtime = item2.land_time;
}
});
});
<tr ng-repeat="flight in schedules | filter:{city_from: data.dep_city.city, city_to: data.arr_city}">
<td>{{flight.aviacompany}}</td>
<td>{{flight.flight_num}}</td>
<td>{{flight.aircraft}}</td>
<td>{{flight.dep_day}}</td>
<td>{{flight.dep_time}}</td>
<td>{{flight.land_time}}</td>
<td class="gray">{{flight.ret_flight_num}}</td>
<td>{{flight.day}}</td>
<td>{{flight.deptime}}</td>
<td>{{flight.landtime}}</td>
</tr>