javascript - Filter source array based on the current filter and put its certain values to the ng-repeat item -
i have array called schedules contains flight schedules info. when user selects departure , arrival cities array being filtered selected cities , outputs flights in table. table contains columns return flight data source array schedules don't have. there value ret_flight_num.
i want load return's flight data current row , still don't know how implement this. suggestions?
var app = angular.module('flight-schedule', []); app.controller('selectctrl', function($scope) { $scope.flights = [ { city: 'ashgabat', destinations: ['almaty', 'amritsar'] }, { city: 'amritsar', destinations: ['ashgabat'] }, { city: 'almaty', destinations: ['ashgabat'] } ]; $scope.schedules = [{ "city_from": "ashgabat", "city_to": "almaty", "aviacompany": "türkmenhowaýollary dmg", "flight_num": "t5-717", "aircraft": "b-737-700", "dep_day": 5, "dep_time": "08-40", "land_time": "12-30", "ret_flight_num": "t5-718" }, { "city_from": "ashgabat", "city_to": "almaty", "aviacompany": "türkmenhowaýollary dmg", "flight_num": "t5-715", "aircraft": "b-737-700", "dep_day": 7, "dep_time": "20-20", "land_time": "*00-10", "ret_flight_num": "t5-716" }, { "city_from": "almaty", "city_to": "ashgabat", "aviacompany": "türkmenhowaýollary dmg", "flight_num": "t5-718", "aircraft": "b-737-700", "dep_day": 5, "dep_time": "14-00", "land_time": "16-00", "ret_flight_num": "t5-715" }, { "city_from": "almaty", "city_to": "ashgabat", "aviacompany": "türkmenhowaýollary dmg", "flight_num": "t5-716", "aircraft": "b-737-700", "dep_day": 1, "dep_time": "01-40", "land_time": "03-40", "ret_flight_num": "t5-717" }, { "city_from": "ashgabat", "city_to": "amritsar", "aviacompany": "türkmenhowaýollary dmg", "flight_num": "t5-551", "aircraft": "b-757-200", "dep_day": 1, "dep_time": "06-20", "land_time": "09-30", "ret_flight_num": "t5-552" }, { "city_from": "ashgabat", "city_to": "amritsar", "aviacompany": "türkmenhowaýollary dmg", "flight_num": "t5-715", "aircraft": "b-737-700", "dep_day": 3, "dep_time": "03-25", "land_time": "06-35", "ret_flight_num": "t5-554" }, { "city_from": "amritsar", "city_to": "ashgabat", "aviacompany": "türkmenhowaýollary dmg", "flight_num": "t5-718", "aircraft": "b-737-700", "dep_day": 2, "dep_time": "06-30", "land_time": "08-45", "ret_flight_num": "t5-553" }, { "city_from": "amritsar", "city_to": "ashgabat", "aviacompany": "türkmenhowaýollary dmg", "flight_num": "t5-716", "aircraft": "b-737-700", "dep_day": 3, "dep_time": "08-05", "land_time": "10-20", "ret_flight_num": "t5-551" }]; });table { border-collapse: collapse; text-align: center; } td, th { border: 1px solid #ddd; } .gray { background-color: #ccc; }<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script> <body ng-app="flight-schedule"> <h4>flight schedules</h4> <div ng-controller="selectctrl"> <form> <p>departure city: <select ng-model="data.dep_city" ng-options="option option.city option in flights"> <option value="">select departure city</option> </select> </p> selected deparure city: <strong>{{data.dep_city.city}}</strong> <p>arrival city: <select ng-model="data.arr_city" ng-options="item item in data.dep_city.destinations"> <option value="">select arrival city</option> </select> </p> selected arrival city: <strong>{{data.arr_city}}</strong> </form> <p></p> <table> <thead> <th>aviacompany</th> <th>flight number</th> <th>aircraft</th> <th>departure day</th> <th>departure time</th> <th>landing time</th> <th class="gray">return flight number</th> <th>return flight departure day</th> <th>return flight departure time</th> <th>return flight landing time</th> </thead> <tbody> <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></td> <td></td> <td></td> </tr> </tbody> <caption>flight schedules</caption> </table> </div> </body>
you can use filter this.
the logic simple:
- find return flight.
- get data.
- display data in table
see comments in code (in filter part) better understanding..
var app = angular.module('flight-schedule', []); app.controller('selectctrl', function($scope) { $scope.flights = [ { city: 'ashgabat', destinations: ['almaty', 'amritsar'] }, { city: 'amritsar', destinations: ['ashgabat'] }, { city: 'almaty', destinations: ['ashgabat'] } ]; $scope.schedules = [{ "city_from": "ashgabat", "city_to": "almaty", "aviacompany": "türkmenhowaýollary dmg", "flight_num": "t5-717", "aircraft": "b-737-700", "dep_day": 5, "dep_time": "08-40", "land_time": "12-30", "ret_flight_num": "t5-718" }, { "city_from": "ashgabat", "city_to": "almaty", "aviacompany": "türkmenhowaýollary dmg", "flight_num": "t5-715", "aircraft": "b-737-700", "dep_day": 7, "dep_time": "20-20", "land_time": "*00-10", "ret_flight_num": "t5-716" }, { "city_from": "almaty", "city_to": "ashgabat", "aviacompany": "türkmenhowaýollary dmg", "flight_num": "t5-718", "aircraft": "b-737-700", "dep_day": 5, "dep_time": "14-00", "land_time": "16-00", "ret_flight_num": "t5-715" }, { "city_from": "almaty", "city_to": "ashgabat", "aviacompany": "türkmenhowaýollary dmg", "flight_num": "t5-716", "aircraft": "b-737-700", "dep_day": 1, "dep_time": "01-40", "land_time": "03-40", "ret_flight_num": "t5-717" }, { "city_from": "ashgabat", "city_to": "amritsar", "aviacompany": "türkmenhowaýollary dmg", "flight_num": "t5-551", "aircraft": "b-757-200", "dep_day": 1, "dep_time": "06-20", "land_time": "09-30", "ret_flight_num": "t5-552" }, { "city_from": "ashgabat", "city_to": "amritsar", "aviacompany": "türkmenhowaýollary dmg", "flight_num": "t5-715", "aircraft": "b-737-700", "dep_day": 3, "dep_time": "03-25", "land_time": "06-35", "ret_flight_num": "t5-554" }, { "city_from": "amritsar", "city_to": "ashgabat", "aviacompany": "türkmenhowaýollary dmg", "flight_num": "t5-718", "aircraft": "b-737-700", "dep_day": 2, "dep_time": "06-30", "land_time": "08-45", "ret_flight_num": "t5-553" }, { "city_from": "amritsar", "city_to": "ashgabat", "aviacompany": "türkmenhowaýollary dmg", "flight_num": "t5-716", "aircraft": "b-737-700", "dep_day": 3, "dep_time": "08-05", "land_time": "10-20", "ret_flight_num": "t5-551" }]; }); // call filter using "flight.ret_flight_num | ret_flight_filter" app.filter('ret_flight_filter', function() { return function(input /* flight.ret_flight_num */, prop /* property want display */, collection /* schedules */, proptocompare /* flight.flight_num - parameter can find ret_flight_num */) { var founded = collection.filter(function(item) { return item[proptocompare] == input; }); if (founded.length > 0) { return founded[0][prop]; } } });table { border-collapse: collapse; text-align: center; } td, th { border: 1px solid #ddd; } .gray { background-color: #ccc; }<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script> <body ng-app="flight-schedule"> <h4>flight schedules</h4> <div ng-controller="selectctrl"> <form> <p>departure city: <select ng-model="data.dep_city" ng-options="option option.city option in flights"> <option value="">select departure city</option> </select> </p> selected deparure city: <strong>{{data.dep_city.city}}</strong> <p>arrival city: <select ng-model="data.arr_city" ng-options="item item in data.dep_city.destinations"> <option value="">select arrival city</option> </select> </p> selected arrival city: <strong>{{data.arr_city}}</strong> </form> <p></p> <table> <thead> <th>aviacompany</th> <th>flight number</th> <th>aircraft</th> <th>departure day</th> <th>departure time</th> <th>landing time</th> <th class="gray">return flight number</th> <th>return flight departure day</th> <th>return flight departure time</th> <th>return flight landing time</th> </thead> <tbody> <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.ret_flight_num | ret_flight_filter: 'dep_day': schedules: 'flight_num'}}</td> <td>{{flight.ret_flight_num | ret_flight_filter: 'dep_time': schedules: 'flight_num'}}</td> <td>{{flight.ret_flight_num | ret_flight_filter: 'land_time': schedules: 'flight_num'}}</td> </tr> </tbody> <caption>flight schedules</caption> </table> </div> </body>
Comments
Post a Comment