How do I load data from the server by default when the input is cleared in angularjs syntax es6?

Question

I'm downloading data from the server. I have an input that searches for football clubs. Everything is ok. When typing 'manchester', it will search for 'Manchester Utd' and 'Manchester City'. When I remove the 'manchester', I want to in the situation when input will be empty that it loaded by default 'london'

  <input type="search" ng-model="query" ng- 
  change="$ctrl.callGetClubs(query)" placeholder="filter" />



 class ClubsController {
        constructor(ClubService) {
        'ngInject'
        this.ClubService = ClubService;
    }

    callGetClubs(query) {
      this.clubs = null;
      this.ClubService.getClubs(query).then(response => 
        {
           this.clubs = response.data;
           console.log(this.clubs);
        });

    }
 }

export default ClubsController;

Expectations: 1.Typing 'manchester' ---> display clubs from manchester 2.Delete 'manchester ---> display default clubs from 'london'

Answer 1

just add default value to query model to the callGetClubs();

 <input type="search" ng-model="query" ng- 
  change="$ctrl.callGetClubs(query)" placeholder="filter" />

class ClubsController {
        constructor(ClubService) {
        'ngInject'
        this.ClubService = ClubService;
}

callGetClubs(query) {
     if(query.length === 0){
       query='london';
     } 
     this.clubs = null;
     this.ClubService.getClubs(query).then(response => 
        {
           this.clubs = response.data;
           console.log(this.clubs);
        });
    }
 }

export default ClubsController;