通过在对象数组的一些字段中进行文本搜索来进行过滤

这段代码中必须有一个小的细节，但是由于我是角新手，我无法自己弄清楚它。下面是输出：通过在对象数组的一些字段中进行文本搜索来进行过滤

Looping with objects: 

{{ x.address + ', ' + x.beds }}

这里是代码：

<!DOCTYPE html> 
<html> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<body> 

<div ng-app="myApp" ng-controller="objectsCtrl"> 

<p>Looping with objects:</p> 
<ul> 
    <li ng-repeat="x in objects"> 
    {{ x.address + ', ' + x.beds }} 
    </li> 
</ul> 

</div> 

<script> 
angular.module('myApp', []).controller('objectsCtrl', function($scope) { 
    $scope.objects = [ 
     { 
      "address": "123, Demo Address", 
      "lat": "45.123123", 
      "lng": "85.003342", 
      "beds": "3", 
      "baths": "1" 
     }, 
     { 
      "address": "123, second Address", 
      "lat": "45.123123", 
      "lng": "85.003342", 
      "beds": "1", 
      "baths": "1" 
     }, 
     { 
      "address": "123, third Address", 
      "lat": "45.123123", 
      "lng": "85.003342", 
      "beds": "2", 
      "baths": "1" 
     }, 
     { 
      "address": "123, fourth Address", 
      "lat": "45.123123", 
      "lng": "85.003342", 
      "beds": "4", 
      "baths": "1" 
     }, 
    ]; 
}); 


angular.module('myApp').filter('textSearchFilter',[ function (objects) { 
    return function(objects, searchText) { 
     searchText = searchText.toLowerCase(); 
     var filtered = []; 
     angular.forEach(objects, function(item, searchText) { 
      if(item.address.toLowerCase().indexOf(searchText) >= 0 || 
       item.beds.toLowerCase().indexOf(searchText) >= 0 || 
       item.baths.toLowerCase().indexOf(searchText) >= 0 
      ) { 
       filtered.push(item); 
      } 
     }); 
     return filtered; 
    } 
}]); 

</script> 

</body> 
</html>

似乎对象的列表不正确地传递到过滤器。我猜我没有把滤波器功能放在正确的地方。

来源

2016-01-21 Karim Mtl

过滤器应放置在ng-repeat指令objects数组中，使用|管道标志，此后您需要提及过滤器名称。

<li ng-repeat="x in objects | textSearchFilter: searchInput">

Addionally你需要正确的过滤器代码

angular.module('myApp').filter('textSearchFilter',[ function (objects) { //<--remove object dependency 
    return function(objects, searchText) {

到

angular.module('myApp').filter('textSearchFilter',[ function() { 
    return function(objects, searchText) {

，并添加HTML中输入字段，如

<input type="text" ng-model="searchText"/>

来源

2016-01-21 20:29:49

无需输入。我会发布正确的代码，我想明白了，谢谢。 –

@KarimMtl那你怎么能把它提供给你的过滤器？ –

我接受你的答案。感谢您的帮助 –

下面是最终代码现在工作：

<div ng-app="myApp" ng-controller="objectsCtrl"> 

<p>Looping with objects:</p> 
<ul> 
    <li ng-repeat="x in objects | textSearchFilter:'demo'"> 
    {{ x.address + ', ' + x.beds }} 
    </li> 
</ul> 

</div> 

<script> 
angular.module('myApp', []).controller('objectsCtrl', function($scope) { 
    $scope.objects = [ 
     { 
      "address": "123, Demo Address", 
      "lat": "45.123123", 
      "lng": "85.003342", 
      "beds": "3", 
      "baths": "1" 
     }, 
     { 
      "address": "123, second Address", 
      "lat": "45.123123", 
      "lng": "85.003342", 
      "beds": "1", 
      "baths": "1" 
     }, 
     { 
      "address": "123, third Address", 
      "lat": "45.123123", 
      "lng": "85.003342", 
      "beds": "2", 
      "baths": "1" 
     }, 
     { 
      "address": "123, fourth Address", 
      "lat": "45.123123", 
      "lng": "85.003342", 
      "beds": "4", 
      "baths": "1" 
     }, 
    ]; 
}); 


angular.module('myApp').filter('textSearchFilter',[ function() { 
    return function(objects, searchText) { 
     searchText = searchText.toLowerCase(); 
     var filtered = []; 
     angular.forEach(objects, function(item) { 
      console.log(searchText); 
      if(item.address.toLowerCase().indexOf(searchText) >= 0 || 
       item.beds.toLowerCase().indexOf(searchText) >= 0 || 
       item.baths.toLowerCase().indexOf(searchText) >= 0 
      ) { 
       filtered.push(item); 
      } 
     }); 
     return filtered; 
    } 
}]);

来源

2016-01-21 20:43:05

通过在对象数组的一些字段中进行文本搜索来进行过滤

回答

相关问题