时间戳

首页 > 解决方案 > 如何将 ng-bind 设置为从 angular http 返回的值？

javascript - 如何将 ng-bind 设置为从 angular http 返回的值？

问题描述

我希望将我的 http 在 angularjs 中返回的值设置为我的变量 ng-bind 中的结果。因此，当我输入文本时，结果应该是 HTTP 请求返回的值。

这是我的代码：

这是我的 AngularJS 部分，其中包含用于书写的文本框。输出应该是从下一个 http 部分返回的值。

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

这是http部分。响应应该绑定在 ng-bind 中。我怎么做？

<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;
  });
});

标签： javascripthtmljsonangularjshttp

解决方案

如果我理解正确，您希望使用文本框获取用户输入并在<p>下面显示翻译（您通过 api 获得）

您对文本框使用相同的模型，并且<p>

你需要这样的东西：

您可以将 http.get 调用包装在一个方法中：

$scope.GetTranslation = function(){

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

在你的 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>

并使用您的 inString 变量进行 api 调用

推荐阅读