0

我已经设法从 Web API 返回可以使用 Angular 显示的数据。但现在我需要能够过滤这些数据。我创建了一个指令来传递我想要过滤的参数，但我找不到任何关于我将使用什么语法进行过滤的信息。这是我的服务：

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