Angularjs ng-repeat filter not working properly with input and ng-model

Question

I'm using AngularJS and I'm displaying a list with ng-repeat. What I'm trying to achieve is to filter the list and only show the items that contain the value that the user writes in the input.

I set it up like the example found here but had no success.

HTML:

<div ng-if="result.length > 0">
    <input type="text" class="pl-4" ng-model="searchText" placeholder="Search" />

    <div class="mt-4 text-left animationIf" ng-repeat="item in result | filter: searchText">
        <div>
            <span class="text-danger">Name: </span>
            <span class="m-0" ng-bind="item.name"></span>
        </div>
        <div>
            <span class="text-danger">Country: </span>
            <span class="m-0" ng-bind="item.country"></span>
        </div>
        <div>
            <span class="text-danger">Born: </span>
            <span class="m-0" ng-bind="item.born"></span>
        </div>
        <div>
            <span class="text-danger">Surnname: </span>
            <span class="m-0" ng-bind="item.surname"></span>
        </div>
    </div>
</div>

An example of the result object would be like this:

$scope.result = [{
    name: "John",
    country: "California ",
    born: "283 AC",
    surname: "Snow"
},{
    name: "Michael",
    country: "US",
    born: "1958",
    surname: "Jackson"
}];

If I give at ng-init="$scope.result = 'John'" the filter works and displays only items that contain 'John' but if I later change the value o the input to 'Michael', it will do nothing. No filter applies.

What am I doing wrong here?

This issue with primitives can be easily avoided by following the "best practice" of always have a `'.'` in your ng-models — georgeawg, Nov 04 '18 at 16:51

score 1 · Answer 1 · answered Nov 04 '18 at 12:21

var app = angular.module('testApp',[]);
app.controller('testCtrl',function($scope){
$scope.result = [{
    name: "John",
    country: "California ",
    born: "283 AC",
    surname: "Snow"
},{
    name: "Michael",
    country: "US",
    born: "1958",
    surname: "Jackson"
}];

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<input type="text" class="pl-4" ng-model="searchText" placeholder="Search" />
<body ng-app="testApp" ng-controller="testCtrl">
 <div class="mt-4 text-left animationIf" ng-repeat="item in result | filter: searchText">
    <div>
        <span class="text-danger">Name: </span>
        <span class="m-0" ng-bind="item.name"></span>
    </div>
    <div>
        <span class="text-danger">Country: </span>
        <span class="m-0" ng-bind="item.country"></span>
    </div>
    <div>
        <span class="text-danger">Born: </span>
        <span class="m-0" ng-bind="item.born"></span>
    </div>
    <div>
        <span class="text-danger">Surnname: </span>
        <span class="m-0" ng-bind="item.surname"></span>
    </div>
</div>

score 1 · Answer 2 · answered Nov 04 '18 at 12:22

Your code works as it is.. The issue occurs in the NgInit where you setting the scope object result to just "John" which is not an array and won't work out-of-the-box with NgRepeat.

So just dont set the $scope.result = 'John' and everything works fine

angular.module("app",[])
.controller("myCtrl", function($scope){
$scope.result = [{
    name: "John",
    country: "California ",
    born: "283 AC",
    surname: "Snow"
},{
    name: "Michael",
    country: "US",
    born: "1958",
    surname: "Jackson"
}];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>

<div ng-app="app" ng-controller="myCtrl">
<input type="text" class="pl-4" ng-model="searchText" placeholder="Search" />

<div class="mt-4 text-left animationIf" ng-repeat="item in result | filter: searchText">
    <div>
        <span class="text-danger">Name: </span>
        <span class="m-0" ng-bind="item.name"></span>
    </div>
    <div>
        <span class="text-danger">Country: </span>
        <span class="m-0" ng-bind="item.country"></span>
    </div>
    <div>
        <span class="text-danger">Born: </span>
        <span class="m-0" ng-bind="item.born"></span>
    </div>
    <div>
        <span class="text-danger">Surnname: </span>
        <span class="m-0" ng-bind="item.surname"></span>
    </div>
</div>
</div>

So strange... In the real application, I have over 1000+ items. You think this could be the problem? — iSpithash, Nov 04 '18 at 12:27
@iSpithash updated the answer.. And no, the filter should work the same regardless of how many items in the array. — Marcus Höglund, Nov 04 '18 at 12:28
Oh I see what's going on. I have an outer div that i didn't include in the question. This div has an ng-if="result.length > 0" to only show when results are ready. this makes the problem. — iSpithash, Nov 04 '18 at 13:04

score 0 · Answer 3 · answered Nov 04 '18 at 12:19

0

I don't see any problem with your code. But do not use ng-init command, like you mentoned:

ng-init="$scope.result = 'John'"

this command is clearing the array you have created in controller.

answered Nov 04 '18 at 12:19

Ashish Diwakar

61
2
12

Yeah, I know. I tried ng-init just to check if it would work, the normal application doesn't have ng-init at all. – iSpithash Nov 04 '18 at 12:28

score 0 · Answer 4 · answered Nov 04 '18 at 13:10

0

I had an outer DIV which had ng-if="result.length > 0" so that it shows only when I populate the results. This made the input not working at all.

Removing the ng-if and putting ng-show instead, solved my problem.

answered Nov 04 '18 at 13:10

iSpithash

56
9

Angularjs ng-repeat filter not working properly with input and ng-model

4 Answers4