CODEWITHSUNDEEP
javascriptjqueryangularjs
Lev
Lev

Reputation: 101

How to load data only if something typed in input

I have: 

<input type="search" name="" placeholder="Search" class="inputsearchform" ng-model="search"/> 

<tr class="rowR" ng-repeat="data in loaded | filter:{song_name: search}">

Is it possible to load data only if I type 4 or more chars in input? I wrote the inputChange function, but I don't know how to call it from attribute of tr.

app.controller('main_control',function($scope, $http){
    $scope.inputChange = function(){
        if($(".inputsearchform").val().length > 3){
            $http.get("http://localhost:7001/load").success(function(data){
                $scope.loaded=data; 
            });
        }
    }       
});

Or maybe it will be better solution to load data when the page is loading but not to show it to the user, because it has 10000 items. And then search and show results only after typing 4 chars. How can I do it?

Upvotes: 1

Views: 137

Answers (3)

Matthew Clise
Matthew Clise

Reputation: 191

You'll want to use ngChange: https://docs.angularjs.org/api/ng/directive/ngChange

You can add it to the input

<input ng-change="inputChange()" ... />

You could also change your inputChange function to check that $scope.search.length instead of using $(".inputsearchform").val().length.

if($scope.search.length > 3 && !$scope.loaded){...

Upvotes: 5

Mathias Haugsb&#248;
Mathias Haugsb&#248;

Reputation: 428

Just follow Matthew's answer

drop jquery and use angular.

app.controller('main_control',function($scope, $http){
    $scope.inputChange = function(){
        if($scope.search.length > 4){
            $http.get("http://localhost:7001/load").success(function(data){
                $scope.loaded=data; 
            });
        }
    }       
});

Upvotes: 0

Konkko
Konkko

Reputation: 662

Add ng-change="inputChange()" to the input.

Upvotes: 0

Related Questions