javascript - 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;
    }
})