As a newcomer to angularjs, I am attempting to implement a filter on click. The user will select a source and destination, then click on the filter button. The table should display results based on the input. Upon page load, the table should already contain values specified in the js.
Below is my code:
HTML
<div class="r-filter input-group col-sm-12">
<div class="form-group clearfix">
<label for="sel1" class="left">Search by Location</label>
<select class="left form-control" id="source" ng-model="source">
<option>Select Source</option>
<option>Mumbai</option>
<option>Pune</option>
<option>Goa</option>
</select>
<select class="left form-control" id="destn" ng-model="destn">
<option>Select Destination</option>
<option>Mumbai</option>
<option>Pune</option>
<option>Goa</option>
</select>
<button class="btn btn-primary " type="button" id="dropdownMenu1" data-toggle="" aria-haspopup="true" aria-expanded="true" ng-click="filterfunc()">Filter</button>
</div>
</div>
<div class="" >
<table class="table table-striped table-reponsive table-bordered bus-chart-table">
<thead >
<tr>
<th colspan="2">Location</th>
<th colspan="3">Bus Fare</th>
<th rowspan="2"></th>
</tr>
<tr>
<th>From</th>
<th>To</th>
<th>Ordinary(Price in Rs.)</th>
<th>Semi-Deluxe(Price in Rs.)</th>
<th>Deluxe(Price in Rs.)</th>
</tr>
</thead>
<tbody >
<tr ng-repeat="record in records | busChartFilter: source: destn">
<td>{{record.dept}}</td>
<td>{{record.arr}}</td>
<td>{{record.ordprice}}</td>
<td>{{record.sdprice}}</td>
<td>{{record.dprice}}</td>
<td><a href="#">Book Now</a></td>
</tr>
</tbody>
</table>
</div>
JS
AppControllers.filter('busChartFilter', function(){
return function(records,source, destn){
debugger
var filteredData= [];
for( var i=0; i<=records.length; i++){
var record=records[i];
if(source==record.dept && destn==record.arr){
filteredData.push(record);
}
}
return filteredData;
}
})
AppControllers.controller("chartController", function($scope){
$scope.beforefilter={};
$scope.records = [
{ dept: 'Mumbai', arr: 'Goa', ordprice: 700, sdprice: 1000, dprice:1500 },
{ dept: 'Mumbai', arr: 'Goa', ordprice: 700, sdprice: 1000, dprice:1500 },
{ dept: 'Mumbai', arr: 'Pune', ordprice: 400, sdprice: 800, dprice:1000 },
{ dept: 'Goa', arr: 'Mumbai', ordprice: 700, sdprice: 1000, dprice:1500 },
{ dept: 'Goa', arr: 'Pune', ordprice: 400, sdprice: 800, dprice:1000 },
{ dept: 'Pune', arr: 'Mumbai', ordprice: 700, sdprice: 1000, dprice:1500 },
{ dept: 'Pune', arr: 'Goa', ordprice: 400, sdprice: 800, dprice:1000 }
];
});
Thank you in advance!