angularjs filter not working with $http

Question

I'm new to angular.js, but I cannot figure out how to make | filter:xxx work with data generated through $http service.

In the following code, I simply cannot get the filter to work with data generated by $http - it simply does nothing when I type inside input box. However, the filter DOES WORK if I hard code some data inside $scope function.

<div ng-controller="UserCtrl">

    <input ng-model="search">
    <ul>

        <li ng-repeat="user in users| filter:search">
            {{user.id}}
            {{user.firstname}}
            {{user.lastname}}
        </li>
    </ul>

</div>

<script>

function UserCtrl($scope, $http) {
$http.get('actions.php?action=get_user_list').success(function(data) {
    $scope.users = data;
  });

}

</script>

Figured out what it is - my php script was generating JSON array of objects with a key (i.e. 01 => array (...). Angular cannot filter this properly. The solution is to generate a list of objects without a key, for example: $output=array(array(data),array(data)) etc. — pvukovic
– pvukovic, Commented May 6, 2013 at 0:40
Maybe this will be useful for you: array_values strips keys, so array becomes simple 0-based, well, array. — alx
– alx, Commented May 11, 2013 at 12:02
The filter in fact works with objects, not just arrays | filter: {name: search} — Lukus
– Lukus, Commented Aug 29, 2013 at 7:21

allel · Accepted Answer · 2015-05-28 16:35:44Z

0

This can serve you:

<li ng-repeat="user in users| filter:{firstname : search}">

answered May 28, 2015 at 16:35

allel

8771 gold badge12 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nyi Nyi Naing · Accepted Answer · 2016-06-29 05:07:46Z

0

Hey test with below codes

<div ng-controller="UserCtrl>
    <input ng-model="search">
    <ul>
        <li ng-repeat="user in users | filter:search.$">
            {{user.id}}
            {{usesr.firstname}}
            {{user.lastname}}
    </ul>
</div>

<script>

var app = angular.module('Your Module Name' ,[]);

app.controller('UserCtrl', function($scope, $http){
    $http.get('actions.php?action=get_user_list').then(function(response){
        $scope.users = response.data;
    });
});

</script>

answered Jun 29, 2016 at 5:07

Nyi Nyi Naing

651 silver badge10 bronze badges

Collectives™ on Stack Overflow

angularjs filter not working with $http

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related