0

I have managed to return data from Web API that can be displayed using Angular. But now I need to be able to filter that data. I have created a directive that passes the parameter that I want to filter by, but I cannot find any info on what syntax I would use to do the filtering. Here is my service :

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

Any help would be much appreciated!

EDIT : Here is my directive :

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();
                }
            };
        }
    };
});
4

1 に答える 1

0

表示目的以外で使用したい、サービスレベルでフィルタリングしたいようなので、関数と一緒にリソースを使用してデータを処理できます。この例では角度のみを使用しています (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-20T19:10:51.260 に答える