在对象数组的某些字段中通过文本搜索进行筛选

There must a small detail missing in this code but as I am new to angular I cannot figure it out myself. Here is the output:

这段代码中一定缺少一个小细节，但由于我是新手，我自己也搞不清楚。这是输出:

Looping with objects:

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

And here is the code:

这里是代码:

<!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>

It seems that the list of objects is not passed correctly to the filter. I am guessing I did not put the filter function in thew right place.

似乎对象列表没有正确地传递给过滤器。我猜我没有把过滤器函数放在正确的位置。

2 个解决方案

#1

Filter should be place on the ng-repeat directive objects array, using | pipe sign, thereafter you need to mention filter name.

过滤器应该放在ng-repeat指令对象数组中，使用|管道符号，然后您需要提到过滤器名称。

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

Addionally you need to correct filter code

此外，您还需要纠正过滤器代码

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

来

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

and add input field inside your HTML, like

在HTML中添加输入字段，比如

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

#2

Here is the final code working now:

下面是最终的代码:

<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;
    }
}]);

#1