如何使用 angularJS 在 HTML 中显示我的请求 response.value答案

【问题标题】：How to display my request response.value in HTML with angularJS如何使用 angularJS 在 HTML 中显示我的请求 response.value
【发布时间】：2021-01-23 15:44:47
【问题描述】：

不要粗鲁，我是 angularJS 新手

我编写了一个 get 函数，它请求一个 API，它给了我一些 Chuck Norris Fact 。

我的问题很简单：当我点击我的按钮时，如何在我的 HTML 中显示响应。

实际上，当我单击按钮时，我会在控制台中看到我的chuckNorrisFact 语句。

非常感谢

这是我的html

<!DOCTYPE html>
<html lang="FR">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Random Chuck Norris jokes</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
</head>



<body ng-app="mainApp">

    <div ng-controller="mainCtrl">
        <button ng-click="generateRandomJoke()"> have fun</button>
        </div>
        <p></p>
    </div>

</body>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="controllers/controllers.js"></script>

</html>

这是我的 controllers.js ：

var app = angular.module('mainApp', []);

app.controller('mainCtrl', function ($scope, $http) {
    function getJoke() {
        $scope.generateRandomJoke = function () {
            $http({
                method: "GET",
                url: "https://api.chucknorris.io/jokes/random",
            })
                .then(function mySuccess(response) {
                    $scope = response.data;
                    console.log($scope.value)
                }, function myError(response) {
                    console.log("erreur : ", response.data.errors);
                });
        }}
    getJoke();
})

【问题讨论】：

您需要添加scope 的要在控制器中显示的数据，并将此表达式{{ your_scope_name }} 放入您的HTML 中。更多信息，您可以阅读更多here。例如（控制器）：$scope.result = response.data; (HTML)：{{result.value}}

标签： javascript html angularjs controller

【解决方案1】：

您正在做的事情不起作用，因为您正在用字符串覆盖整个 $scope 变量。您需要做的是将字符串作为变量添加到您的$scope：

var app = angular.module('mainApp', []);

app.controller('mainCtrl', function ($scope, $http) {
    function getJoke() {
        $scope.generateRandomJoke = function () {
            $http({
                method: "GET",
                url: "https://api.chucknorris.io/jokes/random",
            })
                .then(function mySuccess(response) {
                    $scope.joke = response.data.value;
                    console.log($scope.joke)
                }, function myError(response) {
                    console.log("erreur : ", response.data.errors);
                });
        }}
    getJoke();
})

现在您可以使用{{ }} 访问当前控制器的scope 中的变量。

<!DOCTYPE html>
<html lang="FR">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Random Chuck Norris jokes</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
</head>



<body ng-app="mainApp">

    <div ng-controller="mainCtrl">
        <button ng-click="generateRandomJoke()"> have fun</button>
        <p>{{ mainCtrl.joke }}</p> <!-- you can either write mainCtrl.joke or simply joke -->
    </div>

</body>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="controllers/controllers.js"></script>

</html>

见Plunker。

【讨论】：

不幸的是它不起作用：/如果你有任何想法，我接受它
很抱歉。我发帖的时候没有测试。我编辑了我的答案，我相信现在会没事的。使用 plunker 测试
完美！我现在知道了。非常感谢