在AngularJS中筛选结果

我在我的视图中有ng-click，它应该过滤我提供的结果。在AngularJS中筛选结果

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

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

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

来自$http要求我做在我看来，所有项目的清单。不，我寻找循环遍历所有data.item（我的数据，我从获取请求中获得），并找出它是否包含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请求的结果，我用数据[I]。名称....然而，这似乎并没有在循环工作。

来源

2014-10-01 Dribel

JavaScript'Array'没有'search'方法。在代码运行之前，您是否添加了一些自定义的'Array.prototype.search'实现？你有没有调试你的代码，控制台中是否有错误？ – Vadim 2014-10-01 06:45:06

控制台没有错误，http请求也可以正常工作。我知道JS在数组上没有搜索方法，但是这里的搜索方法搜索数组的单个项目作为子串。这不应该是个问题吧？ – Dribel 2014-10-01 07:07:12

如果您澄清您的问题并发布了所有相关代码，将会对您有所帮助。你问是否正确处理$ http响应，但是你没有显示任何处理响应的代码？此外，ng-click只设置“itemFilter”，但该项目筛选器不显示在其他地方？ – 2014-10-01 07:28:53

您可以尝试创建这种情况下，您的自定义过滤器：

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。

来源

2014-10-01 07:48:29 Vadim

这正是我需要的！非常感谢！ – Dribel 2014-10-01 08:09:20

如果您显示的是一组数据结果，过滤它们的最好方法是使用过滤器，并且从我的理解中可以看出，您需要使用过滤器函数过滤多个值。

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

然后过滤功能将在范围上提供

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

所以你可以看到，如果过滤函数返回true，则项目将被显示。

来源

2014-10-01 07:39:15 bmlsoftware

在AngularJS中筛选结果

回答

相关问题