將篩選添加到Angular Web API數據

我設法從Web API返回可以使用Angular顯示的數據。但現在我需要能夠過濾這些數據。我創建了一個指令來傳遞我想要過濾的參數，但是我找不到任何有關我將使用什麼語法來完成過濾的信息。這裏是我的服務：將篩選添加到Angular Web API數據

var fixtureService = angular.module("fixtureService", ["ngResource"]).factory("Fixture", function ($resource, $rootScope) { 

     fixtureService.addFilter = function (seasonNo) { 
      alert(seasonNo); 
      //do the filtering here? 

     }; 

     return $resource(
      "/api/fixture/:Id", 
      { Id: "@Id" }, 
      { "update": { method: "PUT" } } 
    ); 
    });

任何幫助將不勝感激！

編輯：這是我的指令：

app.directive("season", function() { 
    return { 
     restrict: 'E', 
     controller: SeasonCtrl, 
     template: '<select name="Seasons" ng-model="selectedSeason" ng-options="season.SeasonNo for season in seasons" ng-change="handleChange(season)">\ 
        <option value=""> --Valitse-- </option>\ 
        </select>', 
     link: function (scope, elem, attrs, ctrl) { 
      scope.handleChange = function() { 
       if (scope.selectedSeason != null) { 
        fixtureService.addFilter(scope.selectedSeason.SeasonNo); 
       } else { 
        fixtureService.clearFilter(); 
       } 
      }; 
     } 
    }; 
});

來源

2013-05-20 user517406

您能否簡要介紹一下你的意思是通過過濾器的東西。你想過濾$資源正在返回什麼？ – lucuma

是的，我想只返回與參數值匹配的數據，在這種情況下參數是'seasonNo' – user517406

這是僅用於顯示目的嗎？也就是說你正在使用'ng-repeat'？ – lucuma

既然你想使用它只是顯示目的之外，似乎想要在服務級別對其進行過濾，你可以沿着使用資源函數來處理數據。這個例子只使用角度（你可以使用類似lodash或下劃線的東西）。基本上，我將資源保存在服務中供使用，併爲我將調用的服務創建一些功能並過濾數據。我還在ngrepeat中添加了一個常規過濾器。

http://plnkr.co/edit/JLeejQb9kLyzsFPI2o9o?p=preview

app.controller('MainCtrl', function($scope, Fixture) { 

$scope.locations = Fixture.getFilteredData('Austin'); 
$scope.unfiltered = Fixture.getData(); 
}); 

angular.module("fixtureService", ["ngResource"]).factory("Fixture", function ($resource, $rootScope, $q, $filter) { 

    var resource = $resource("data.json"); 
    var originallist =[]; 


    var service = { 

    getData:function() { 
     var d = $q.defer(); 
     resource.get(function(data) { 
     originallist = data.data.locationlist; 
     d.resolve(originallist); 
     }); 
     return d.promise; 
    }, 
    cityFilter:function(list, filtered) { 
     return $filter('filter')(list, {city:filtered}); 
    }, 


    getFilteredData: function(filtered) { 
     var self = this; 
     var d = $q.defer(); 
     var list = []; // going to use for the filter 
     // you could check to see if we already have an originallist, just depends on if you want to cache that 
     self.getData().then(function(data){ 
      list = self.cityFilter(originallist, filtered) 
      d.resolve(list); 
     }); 
     return d.promise; 
     } 
    }; 

    return service; 

}); 



<body ng-controller="MainCtrl"> 
<h2>Filtered</h2> 
    <div ng-repeat='location in locations'>{{location.locationname}} is in {{location.city}}</div> 

    <h2>Unfiltered</h2> 
    <div ng-repeat='location in unfiltered'>{{location.locationname}} is in {{location.city}}</div> 

    <h2>Filtered with an ngRepeat Filter</h2> 
    <div ng-repeat='location in unfiltered | filter:{city:"Austin"}'>{{location.locationname}} is in {{location.city}}</div> 

</body>

來源

2013-05-20 19:10:51 lucuma

將篩選添加到Angular Web API數據

回答

相關問題