How to get input text value with Angularjs?

Asked

Viewed 4,234 times

1

I’m trying to take the value of an input and save it to a variable so I can use the result as a value in LIKE, of a consultation of sqlite. Only I came across a small problem: when I try to get the value of the input the result that comes is undefined, but if I use a controller in the div that involves the input, here comes the correct result. I’m trying to get this value with the function inside the template controller.

Then I had the following question: is it possible that I take the value of the input with some function that is inside the controller of this template or will I have to create another controller just to get the value of the input? And if I have to create another controller, how can I pick it up and use it in the query SQL?

Edited

I’ll put my controller code and HTML here, it might be easier to understand:

myApp.controller("ServicesCtrl", function($scope, $ionicPlatform, $cordovaSQLite) {
  
  var result = '';

  $ionicPlatform.ready(function() {
    $scope.myClick = function() {
      result = $scope.searchkey;
      console.log(result);
    };

    var query = "SELECT serviceName FROM tblServices WHERE serviceName LIKE '%"+ result +"%' ";
    $cordovaSQLite.execute(db, query, []).then(function(res) {
      if(res.rows.length > 0) {
        for(var i = 0; i < res.rows.length; i++) {
          console.log(res.rows.item(i).serviceName);
        }
      }
    }, function(err) {
      console.log(err);
    });
  });

});
<div class="bar bar-header item-input-inset">
  <label class="item-input-wrapper">
    <i class="icon ion-ios-search placeholder-icon"></i>
    <input type="text" placeholder="Buscar..." name="key" autocorrect="off" ng-model="searchkey">
  </label>
  <button class="button" ng-click="myClick()">Buscar</button>
</div>

  • Its function myClick does not display anything on the console?

  • Returns undefined. It only takes the correct value if the controller is in the div and not in the template, which is how I’m using it.

1 answer

1


I don’t understand why your controller is making select outside the click function, I imagine you want to select already once you load Ionic, but the function does not need to be inside the ready.

In the controller I always set the default value I will use in the variables of Scope, just like with the result

myApp.controller("ServicesCtrl", function($scope, $ionicPlatform,     $cordovaSQLite) {

  var result = '';
  $scope.searchkey = '';

  $scope.myClick = function() {
      result = $scope.searchkey;
      console.log(result);
  };

  $ionicPlatform.ready(function() {

    //desta forma chama o select com o result = '' assim que carregar o ionic
    var query = "SELECT serviceName FROM tblServices WHERE serviceName LIKE '%"+ result +"%' ";
    $cordovaSQLite.execute(db, query, []).then(function(res) {
      if(res.rows.length > 0) {
        for(var i = 0; i < res.rows.length; i++) {
          console.log(res.rows.item(i).serviceName);
        }
      }
    }, function(err) {
      console.log(err);
    });
  });

});

If you do not solve the problem you have a way to pass the input value as parameter in the function:

<div class="bar bar-header item-input-inset">
    <label class="item-input-wrapper">
       <i class="icon ion-ios-search placeholder-icon"></i>
       <input type="text" placeholder="Buscar..." name="key" autocorrect="off" ng-model="searchkey">
    </label>
    <button class="button" ng-click="myClick(searchkey)">Buscar</button>
</div>

In this case just fix your myClick function to receive the parameter:

$scope.myClick = function(search) {
    result = search;
    console.log(result);
};
  • Everything worked perfectly! Thank you very much, André. I even tried to pass the value as a parameter, but also it wasn’t working, I think I was missing something unnoticed.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.