current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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();
                }
            };
        }
    };
});
share|improve this question
1  
Can you explain a bit about what you mean by a filter. Are you trying to filter what the $resource is returning? –  lucuma May 20 '13 at 15:42
    
Yes, I want to return only the data that matches a parameter value, in this case the parameter is 'seasonNo' –  user517406 May 20 '13 at 15:50
    
Is this just for display purposes? Ie you are using a ng-repeat ? –  lucuma May 20 '13 at 16:20
    
I am not using an ng-repeat in my directive (see my edit above), however it is not just for display purposes, I want to filter the data and for it to be editable once filtered –  user517406 May 20 '13 at 16:42

1 Answer 1

up vote 0 down vote

Since you want to use it outside of just display purposes and it seems you want to filter it at the service level, you can use a resource along with a function to process the data. This example uses only angular (you could use something like lodash or underscore too). Basically I'm saving the resource in the service for use and creating some functions for the service that I will be calling and filtering the data. I've also added a regular filter on an 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>
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.