CODEWITHSUNDEEP
javascripthtmljsonangularjshttp
PeakyBlinder
PeakyBlinder

Reputation: 1127

How do I set ng-bind as value returned from angular http?

I want the value returned from my http in angularjs to be set as result in my variable ng-bind. SO that, when I type in text, the result should be the value returned from the HTTP request.

Here is my code:

This is my AngularJS part which will have the text box for writing. The output should be the value returned from the next http part.

<div ng-app="" ng-controller="myCtrl"> 
<p>Name: <input type="text" ng-model={{myWelcome}}></p>
<p ng-bind={{myWelcome}}></p>
</div>

And this is the http part. The response should be binded in ng-bind. How do I do that?

<script>
var app = angular.module('', []);
app.controller('myCtrl', function($scope, $http) {
  $http.get("http://146.148.85.67/processWordJSON?inString=namasthe&lang=hindi")
  .then(function(response) {
      $scope.myWelcome = response.data;
  });
});

Upvotes: 0

Views: 81

Answers (1)

David Edel
David Edel

Reputation: 569

If I understand correctly, You want to get the user input with a textbox and display the translation (which you get via api) in the <p> below

You are using the same model for the text box and <p>

You would need something like this:

You can wrap your http.get call in a method:

$scope.GetTranslation = function(){

return  $http.get("http://146.148.85.67/processWordJSON?inString=namasthe&lang=hindi")
  .then(function(response) {
      $scope.myWelcome = response.data;
  });
}

and in your html:

<div ng-app="" ng-controller="myCtrl"> 
<p>Name: <input type="text" ng-change="GetTranslation()" ng-model={{inString}}></p>
<p ng-model={{myWelcome}}></p>
</div>

And use your inString variable to make the api call

Upvotes: 1

Related Questions