Question

我在我的视图中点击了，这应该会过滤我呈现的结果。

<a role="menuitem" tabindex="-1" href ng-click="itemFilter=itemABCFilter">ABC Filter</a>

ABC的所有项目都存储在我的控制器中，例如

$scope.itemABC=["Alpha","Beta","Gamma"];

我视图中所有项目的列表来自我发出的$http请求。不，我遍历所有data.item（我从get请求获得的数据）并查明它是否包含itemABC的任何元素，或者可以将其视为itemABC的任何元素的子字符串。

  $scope.itemABCfilter=function(data){
    for (var j=0; j<$scope.itemABC.length;j++){
      if($scope.itemABC[j].search($scope.data[i].name)>-1) return true;
    }

上面的代码不会过滤我的结果。我是否正确处理$ http请求结果或代码是否错误？你会怎么做？

$ http请求看起来像这样，工作得很好。

$scope.method='GET';
      $scope.url='/files/itemdata.js';
      $scope.fetch=function(){
          $http({
              method:$scope.method,
              headers:{'Content-Type': 'application/x-www-form-urlencoded'},
              cache:true

          })
              .success(function(data,status){
                  $scope.status=status;
                  $scope.data=data;
                  console.log(data);
                  console.log(status);
                  itemABCFilter();

              })
              .error(function(data,status){
                  $scope.data=data||"Request failed";
                  $scope.status=status;
              })
      };

要访问http请求的结果，我使用data [i] .name ....但是，它似乎在循环中不起作用。

Answer 1

您可以尝试为该案例创建自定义过滤器：

<强> HTML

<div ng-controller="ctrl">
  <ul>
    <li ng-repeat="item in items | myFilter:list">{{item.name}}</li>
  </ul>
  <a ng-click="filterResults()">Filter results</a>
</div>

<强>的JavaScript

angular.module('app', []).
  controller('ctrl', ['$scope', '$http', function($scope, $http) {
    $http.get('data.json').success(function(data) {
      $scope.items = data;
    });
    $scope.filterResults = function() {
      $scope.list = ["Alpha", "Beta", "Gamma"];
    }
  }]).
  filter('myFilter', function() {
    return function(data, list) {
      if(data && list) {
        return data.filter(function(item) {
          return list.reduce(function(prev, cur) {
            return prev || item.name.indexOf(cur) !== -1;
          }, false);
        });
      } else {
        return data;
      }
    }
  });

现场演示here。

搜索所有属性的示例（不仅是name）here。

Answer 2

如果您要显示一组数据结果，过滤它们的最佳方法是使用过滤器，根据我的理解，您需要通过过滤器功能过滤多个值。

<li ng-repeat="item in items|filter:abcFilter">{{item.name}}</li>

然后过滤器功能将在范围

中可用

$scope.abcFilter = function(item){
  return $scope.itemABC.indexOf(item.name) > -1;     
}

因此，您可以看到过滤器函数是否返回true，将显示该项目。

在AngularJS中过滤结果

2 个答案: