Fatal编程技术网
  • javascript/
  • Javascript 向Web API数据添加过滤

Javascript 向Web API数据添加过滤

javascript angularjs asp.net-web-api

Javascript 向Web API数据添加过滤,javascript,angularjs,asp.net-web-api,Javascript,Angularjs,Asp.net Web Api,我已经设法从Web API返回数据，这些数据可以使用Angular进行显示。但现在我需要能够过滤这些数据。我已经创建了一个指令，该指令传递了我想要过滤的参数，但是我找不到任何关于我将使用什么语法进行过滤的信息。这是我的服务： var fixtureService = angular.module("fixtureService", ["ngResource"]).factory("Fixture", function ($resource, $rootScope) { fixt

我已经设法从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();
                }
            };
        }
    };
});

应用程序指令（“季节”，功能（）{
返回{
限制：'E'，
控制器：按CTRL键，
模板：'\
--瓦利泽--\
',
链接：函数（范围、元素、属性、ctrl）{
scope.handleChange=函数（）{
如果（scope.selectedSeason！=null）{
fixtureService.addFilter（范围.选择的季节.季节号）；
}否则{
fixtureService.clearFilter（）；
}
};
}
};
});
由于您希望在显示目的之外使用它，并且似乎希望在服务级别对其进行过滤，因此您可以使用资源和函数来处理数据。此示例仅使用角度（也可以使用lodash或下划线之类的内容）。基本上，我在服务中保存资源以供使用，并为我将调用和过滤数据的服务创建一些函数。我还为ngrepeat添加了一个常规过滤器

app.controller（'MainCtrl'，函数（$scope，Fixture）{
$scope.locations=Fixture.getFilteredata（'Austin'）；
$scope.unfilted=Fixture.getData（）；
});
angular.module（“fixtureService”，[“ngResource”]）.factory（“Fixture”，函数（$resource、$rootScope、$q、$filter）{
var resource=$resource（“data.json”）；
var原始列表=[]；
var服务={
getData:function（）{
var d=$q.defer（）；
resource.get（函数（数据）{
originallist=data.data.locationlist；
d、 决心（原创者）；
});
回报承诺；
},
cityFilter:函数（列表，已筛选）{
返回$filter（'filter'）（列表，{city:filtered}）；
},
getFilteredData:函数（已筛选）{
var self=这个；
var d=$q.defer（）；
var list=[]；//将用于筛选器
//你可以查看我们是否已经有了原始列表，这取决于你是否想缓存它
self.getData（）.then（函数（数据）{
列表=self.cityFilter（原始列表，已过滤）
d、 决议（清单）；
});
回报承诺；
}
};
回程服务；
});
过滤
{{location.locationname}位于{{location.city}
未过滤
{{location.locationname}位于{{location.city}
使用重复过滤器进行过滤
{{location.locationname}位于{{location.city}
您能解释一下过滤器的含义吗。您正在尝试筛选$resource返回的内容吗？是的，我只想返回与参数值匹配的数据，在这种情况下，参数是'seasonNo'这只是为了显示吗？即您使用的是
ng repeat
？我的指令中没有使用ng repeat（请参见上面的编辑），但它不仅仅用于显示目的，我希望过滤数据，并使其在过滤后可编辑 
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>