Question

此代码中必须缺少一些细节，但由于我是棱角分明的新手，我无法自己解决这个问题。这是输出：

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>

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

Answer 1

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

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

另外，您需要更正过滤器代码

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"/>

Answer 2

以下是最终的代码：

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

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

2 个答案: