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>
Place your ng-app at the root level. Here your textbox for search is outside ng-app