AngularJS過濾

Question

我在angularjs初學者，我想在點擊應用過濾器，用戶選擇來源和目的地，將點擊過濾器按鈕，則該表應該返回按輸入，頁面加載表應該有JS已經提到的值，

這裏是我的代碼。

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 } 
    ]; 

}); 

感謝ü提前

Answer 1

我已經取得了一些變化 -

Fiddle

app.filter('busChartFilter', function(){ 

    return function(records,source, destn){ 
     debugger 

     var filteredData= []; 
     if((source=='' || source==undefined) && (destn == ''|| destn==undefined)) 
     return records; 
     for(var i=0; i<records.length; i++){ 
      var record=records[i]; 
      if(source==record.dept && destn==record.arr){ 
       filteredData.push(record); 
      } 
     } 

     return filteredData; 
    } 
})