CODEWITHSUNDEEP
angularjs
Crazyman60
Crazyman60

Reputation: 119

AngularJS filtering in multiple arrays

I'm trying to apply filter on a list of objects but I can't manage to make it work. I've read that AngularJS does not provide "out of box" multiples objects filtering, may be that's why it's not working?

Here is my code:

<div class="list list-inset">
    <label class="item item-input" id="events-search">
        <i class="icon ion-search placeholder-icon"></i>
        <input type="text" placeholder="Rechercher parmis les evenements" ng-model="nsearch">
    </label>
</div>

<div class="list">

    <a class="item item-thumbnail-left" href="#" ng-repeat="info in infos | filter:nsearch">
        <img src="xxx">
        <h2>{{ info.name }}</h2>
        <p>{{ info.date}} à {{ info.hour }}</p>
    </a>

</div>

For example, "infos" value would be something like:

Q5PAvIQ2x8TLNkZmhTr59s984ALI5s10 {
    name: "This is an event",
    ...
},
jj8oB6WemYVsGZ1FSm31DFBtSlM0pfZK {
    name: "This is a second event",
    ...
}

I'm trying to filter by name.

Does anyone have an idea?... thanks!

Upvotes: 2

Views: 1512

Answers (3)

Ali Habibzadeh
Ali Habibzadeh

Reputation: 11577

If your data is in a hash table rather than an actual array then you need to use the key, value notation for accessing the data in a ng-repeat:

 <a class="item item-thumbnail-left" href="#" ng-repeat="(key, value) in searchedInfos()">
       <h2>{{ value.name }}</h2>
 </a>

In such arrangement angular's filter can not be simply applied to a non array set, so you have a create a custom filtering function on the your scope which would take it's value from a an input:

<input type="text" ng-model="view.searchStr"/>

and on the scope:

$scope.infos = {
    Q5PAvIQ2x8TLNkZmhTr59s984ALI5s10: {
        name: "This is an event"
    },
    jj8oB6WemYVsGZ1FSm31DFBtSlM0pfZK: {
        name: "This is a second event"
    }
};

$scope.view = {
    searchStr : ""
}

$scope.searchedInfos = function(){

    var searched = {};

    if ($scope.view.searchStr) {

        angular.forEach($scope.infos, function(value, key){

            if (value.name.toLowerCase().indexOf($scope.view.searchStr.toLowerCase()) != -1) {

                searched[key] = value;

            }
        });

    }

    else {

        searched = $scope.infos;
    }

    return searched;
}

Here is a working fiddle

Upvotes: 1

Kickaha
Kickaha

Reputation: 3857

As the name is variable and unusable in a repeat you could reference by index

<h2>{{ info[0].name }}</h2>
        <p>{{ info[0].date}} à {{ info[0].hour }}</p>

In your 'something like this' json array you probably need a comma 

[Q5PAvIQ2x8TLNkZmhTr59s984ALI5s10 , {
    name: "This is an event",
...},
jj8oB6WemYVsGZ1FSm31DFBtSlM0pfZK ,  {
    name: "This is a second event",
...},

...]

, each info element will only has 1 element and can be referenced with [0]

Upvotes: 0

Mostafa Ahmed
Mostafa Ahmed

Reputation: 661

if infos will be an array of objects and you want to filter by the name not all the object variables in the system so all you need to do is to convert the search variable to be an object and but in it the same variable name that you want to search with

in your code you only need to convert the ng-model of the input to be like this

<input type="text" placeholder="Rechercher parmis les evenements" ng-model="nsearch.name">

and complete the rest of the code as it is

Upvotes: 1

Related Questions