user1650487 user1650487 - 6 months ago 21
AngularJS Question

Angular/Ionic: Can't access value in html input field

I have the following HTML code:

<div class="list">
<label class="item item-input">
<input id="email" ng-model="email" type="text" placeholder="Email Address">
</label>
<br>
<center>
<button class="button button-positive" ng-click="getData();"> Test </button>
</center>
</div>


And the following Angular code:

$scope.getData = function() {
var emailadd = document.getElementById('email');
var url = "http://172.16.99.138/sendemail.php?emailaddress="+emailadd;
console.log(url);
};


However when I try to run the code, the console says that it can't find the variable. Would appreciate guidance here.

Answer

Note: Your code in question is wrong anyway as document.getElementById('email') will get you the dom element, this is not the value() of the element.

Still you should be doing this the "Angular Way" :

You need to define the model in your Controller like so :

  $scope.email = {
    text: ''
  };

Then you can bind in the HTML like so :

<input type="email" name="input" ng-model="email.text" required>

Then you can use the $scope.email in your method :

$scope.getData = function() {
   var url = "http://172.16.99.138/sendemail.php?emailaddress="+$scope.email.text;
   console.log(url);
};

ng-model Documentation