Filter for AngularJS Data I need controller code for filters

Hi Experts:

I have this angularJS code. This has few airline flight data, I need the following filters:
1. To display only one airline flights e.g. Delta only or United only.
2. Given a min max price range. I need to display flights only in that range. Say, the range is 100 USD till 125 USD. I need flights within the range of 100...125.
3. I need to display flight taking off before 10 AM.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="myApp">

<table ng-controller="myCtrl">
<tr ng-repeat="x in flights">
  <td>{{x.no}}</td>
  <td>{{x.from}}</td>
  <td>{{x.to}}</td>
  <td>{{x.starttime}}</td>
  <td>{{x.reaching}}</td>
  <td>{{x.Duration}}</td>
  <td>{{x.price}}</td>
  <td>{{x.Name}}</td>
  <td>{{x.Country}}</td>
</tr>
</table>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.flights = [
    {no:'DL 123', from:'SFO', to:'DEN', starttime:'7 AM', stop:'0', reaching:'9 AM', Duration:'2h', price:'100 dollars'},
    {no:'UA 123', from:'SFO', to:'DEN', starttime:'9 AM', stop:'1', reaching:'9 AM', Duration:'2h', price:'120 dollars'},
    {no:'VX 123', from:'SFO', to:'DEN', starttime:'12 PM', stop'2', reaching:'9 AM', Duration:'2h', price:'130 dollars'}
  ]
});
</script>

</body>
</html>

Open in new window


Please help me out with slight controller code.

Best Regards

Sunnybrad
sunnybradAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
It sounds like you want a generic filter that can handle different search options - is that correct?

How will the Airline and Amount values come from - user input?
0
sunnybradAuthor Commented:
Hi Julian:

Generic filter with various search option is fine. Amount is fixed and get rendered from DB.

Best Regards

Sunnybrad
0
Julian HansenCommented:
Ok but what are we filtering on - you say amount is hardcoded and your data does not have any airline data - other than what you can sort of figure out from the flight.

I get the feeling we are only seeing a part of the picture here.
0
sunnybradAuthor Commented:
Hi Julian:

Yes I missed the HTML control that will initiate the filtering. This is the missing part. List of checkboxes for the airlines. If you select DL or Delta only delta flight will appear. A sliding control with min value for price 100 $ and max value 130 $. You can build various other controls for filtering. Just one example would be great help. I can finish the rest myself.

If I have further questions will ask then.

Best Regards,

Sunnybrad
0
Julian HansenCommented:
Ok here is a sample.

I have made a few changes.
- I added a field to the data called 'airline' so I could filter on that field
- I added a $scope.airlines array to use as the selection options for the airline filter
- I added a <select> linked to the airlines array for users to select the airline
- I added a custom filter that takes the selected value in the airlines <select> and uses that to filter the ng-repeat results

HTML
<html ng-app="myApp">
<head>
<meta charset="UTF-8"/>
<title>AngularJS: Custom Filters</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="css/custom.css" rel="stylesheet" />
<style type="text/css">
</style>
</head>
<body>
<div class="wrapper" ng-controller="myCtrl">
  <select class="form-control" ng-options="aln for aln in airlines" ng-model="airline"></select>
  <table class="table">
    <tr ng-repeat="x in flights | alnsrch:airline">
      <td>{{x.airline}}</td>
      <td>{{x.no}}</td>
      <td>{{x.from}}</td>
      <td>{{x.to}}</td>
      <td>{{x.starttime}}</td>
      <td>{{x.reaching}}</td>
      <td>{{x.Duration}}</td>
      <td>{{x.price}}</td>
      <td>{{x.Name}}</td>
      <td>{{x.Country}}</td>
    </tr>
  </table>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.airlines = ['Delta','United'];
    $scope.flights = [
    {no:'DL 123', from:'SFO', to:'DEN', starttime:'7 AM', stop:'0', reaching:'9 AM', Duration:'2h', price:'100 dollars', airline: 'Delta'},
    {no:'UA 123', from:'SFO', to:'DEN', starttime:'9 AM', stop:'1', reaching:'9 AM', Duration:'2h', price:'120 dollars', airline: 'United'},
    {no:'VX 123', from:'SFO', to:'DEN', starttime:'12 PM', stop:'2', reaching:'9 AM', Duration:'2h', price:'130 dollars', airline: 'Delta'}
    ]
  })
  .filter('alnsrch', function() {
    return function(input, option1) {
      if (!option1) return input;
      option1 = option1.toLowerCase();
      var output = input.filter(function(x) {
        return x.airline.toLowerCase() == option1
      });
      
      return output;
    }
  });
</script>
</body>
</html>

Open in new window

Working sample here
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.