Search code examples
angularjsjsonapisearchangular-ngmodel

Angular instant search with filter is not working on JSON api calls


I was trying to collect JSON data from an API endpoint using AngularJS and that worked just fine. I was able to make list using the datas. Also tried to include an input to search. But the instant search with filter is not working. I double checked the syntax but seems like it is just fine. Any suggestions will be appreciated.

            <label>Search: <input type="text" ng-model="search"> </label>
                    <div class="list-group">
                                <div ng-app="listBuilderFromJsonData" ng-controller="listDatasBootstrap">
                                    <a href="#" class="list-group-item" ng-repeat="data in datas | filter:search">
                                        {{data.title}}
                                </a>
                              </div>
                            </div>                    
                    <script>
                     var app= angular.module('listBuilderFromJsonData', []);
                       app.controller('listDatasBootstrap', function($scope, $http){
                        $http.get("https://api.end.point.url").then(function(response){
                            $scope.datas = response.data.items;             
                        });
                        });
                </script>

Solution

  • Place your ng-app at the root level. Here your textbox for search is outside ng-app