向Angular Web API数据添加过滤

Question

I have managed to return data from Web API that can be displayed using Angular. 我设法从Web API返回可以使用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();
                }
            };
        }
    };
});

Answer 1

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). 此示例仅使用有角度的（您也可以使用lodash或下划线）。 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. 我还在ngrepeat上添加了常规过滤器。

http://plnkr.co/edit/JLeejQb9kLyzsFPI2o9o?p=preview 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>

向Angular Web API数据添加过滤

问题描述

1 个解决方案

解决方案1
0 2013-05-20 19:10:51

向Angular Web API数据添加过滤

问题描述

1 个解决方案

解决方案1 0 2013-05-20 19:10:51

解决方案1
0 2013-05-20 19:10:51