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

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
– georgeawg, Commented Nov 4, 2018 at 16:51

Sajeetharan · Accepted Answer · 2018-11-04 12:21:24Z

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>

Marcus Höglund · Accepted Answer · 2018-11-04 12:22:39Z

1

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>

answered Nov 4, 2018 at 12:22

Marcus Höglund

16.9k11 gold badges54 silver badges72 bronze badges

3 Comments

iSpithash Over a year ago

So strange... In the real application, I have over 1000+ items. You think this could be the problem?

Marcus Höglund Over a year ago

@iSpithash updated the answer.. And no, the filter should work the same regardless of how many items in the array.

iSpithash Over a year ago

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.

Ashish Diwakar · Accepted Answer · 2018-11-04 12:19:41Z

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 4, 2018 at 12:19

Ashish Diwakar

712 silver badges12 bronze badges

1 Comment

iSpithash Over a year ago

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 · Accepted Answer · 2018-11-04 13:10:27Z

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 4, 2018 at 13:10

iSpithash

569 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

3 Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

1 Comment

Comments

Linked

Related