CODEWITHSUNDEEP
angularjs
Karim Mtl
Karim Mtl

Reputation: 1251

Filter by text search in some fields of array of objects

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.

Upvotes: 1

Views: 1468

Answers (2)

Karim Mtl
Karim Mtl

Reputation: 1251

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

Upvotes: 0

Pankaj Parkar
Pankaj Parkar

Reputation: 136174

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

<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) {

to 

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

and add input field inside your HTML, like

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

Upvotes: 1

Related Questions