AngularJs data binding not working with ionic

Question

I feel like I am missing something obvious with some input text in ionic. I am using angular-ui-router with this route:

 $stateProvider.state('findPersons', {
   url : '/findPersons',
   templateUrl : 'html/findPersons.html',
   controller : 'findPersonsCtrl'
 });

This is the text input code in findPersons.html:

<div class="bar bar-header item-input-inset">
  <label class="item-input-wrapper">
    <i class="icon ion-search placeholder-icon"></i>
    <input type="search" placeholder="Key Word" ng-model="keyWord">
  </label>
  <button ng-click="findPersons()" class="button button-bar-inline">Load</button>
</div>

Then I use the keyword to request a rest API this way:

bockmoiApp.controller("findPersonsCtrl", function($scope, $http) {
  $scope.results= null;
  $scope.numberOfResults=-1;
  $scope.keyWord="";

  $scope.findPersons = function() {

    $http({
      method : 'GET',
      url : 'http://localhost:8080/bockmoi/rest/findPersons?keyWord='
          +$scope.keyWord+'&page=0&size=2'
    })
    .then(function successCallback(response) {
      $scope.results = response.data;
      $scope.numberOfResults=$scope.results.numberOfElements;
    },function errorCallback(response) {

    });
  }
});  

And I am wondering why when I hit the load button, the keyWord value is always replaced by "" before the request is sent, which causes the fetching of all the first size results in the remote database! Nevetheless, this code is working on a native html,css and angularjs code without ionic.

Can somebody tell me what I am doing wrong?

Answer 1

You need to be using "dot notation". Because of inheritance, simple values will not do two way binding.

Please use the following code for two way data binding with ionic

In controller

$scope.test={keyWord : ""};

In view

<div class="bar bar-header item-input-inset">
    <label class="item-input-wrapper">
        <i class="icon ion-search placeholder-icon"></i>
        <input type="search" placeholder="Key Word" ng-model="test.keyWord">
    </label>
    <button ng-click="findPersons()" class="button button-bar-inline">Load</button>
</div>

Live Example are here & same issue are here.

Read more details from here.

Hope this well help!

Answer 2

Find the below code everything works fine. Possible errors

• URL in the $http call is in two lines. Fix it.

  var app = angular.module('plunker', []);
  
  app.controller('MainCtrl', function($scope,$http) {
  $scope.name = 'World';
  $scope.results= null;
     $scope.numberOfResults=-1;
     $scope.keyWord="";
  
     $scope.findPersons = function() {
      var URL= "http://localhost:8080/bockmoi/rest/findPersons?keyWord="+$scope.keyWord+'&page=0&size=2';
      console.log(URL);
      $http({
        method : 'GET',
        url : 'http://localhost:8080/bockmoi/rest/findPersons?keyWord='+$scope.keyWord+'&page=0&size=2'
      }).then(function successCallback(response) {
      $scope.results = response.data;
      $scope.numberOfResults=$scope.results.numberOfElements;
  
      },function errorCallback(response) {
  
    });
  }
  });
  

I tried printing your URL after the button click as in the above code and the behaviour is as expected.

LIVE DEMO

Answer 3

I tried your code, but I could not reproduce your problem. Sorry :( . Just a plus, whether you would like to improve you code, you can follow john papa's advices https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md