In my AngularJS project, I am using ng-repeat to display a list and want to implement a filter that shows only items containing the user-input value. I tried setting it up following an example from here, but it didn't work as expected.
Here is the HTML code:
<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">Surname: </span>
<span class="m-0" ng-bind="item.surname"></span>
</div>
</div>
</div>
An example of the 'result' object looks like this:
$scope.result = [{
name: "John",
country: "California ",
born: "283 AC",
surname: "Snow"
},{
name: "Michael",
country: "US",
born: "1958",
surname: "Jackson"
}];
When I initialize with ng-init="$scope.result = 'John'", the filter works for 'John', but if I change the input value to 'Michael', no filtering occurs. What am I missing here?