时间戳

首页 > 解决方案 > Angularjs标签显示对象对象？

angularjs - Angularjs标签显示对象对象？

问题描述

我正在创建一个程序，每次按下“生成报价”按钮时都会生成一个报价。我正在使用这个 API 来获取报价： https ://thesimpsonsquoteapi.glitch.me/quotes

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <h1>Quote Generator</h1>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>

    <script src="app.js"></script>
</head>
<body ng-app="myApp" ng-controller="quoteGenerator">

<button id="btn" type="button" ng-click="generateQuote()"> Generate quote</button>

<button id="btn1" type="button" ng-click="test()"> Test</button>
<br>
<label  id="label" for="btn" ng-model="label"></label>
</body >
</html>

应用程序.js：

var app= angular.module('myApp',[]);
app.controller('quoteGenerator',['$scope','$http', function ($scope, $http) {
var html="https://thesimpsonsquoteapi.glitch.me/quotes";
    $scope.generateQuote=function generateQuote() {
        $http.get(html)
            .then(function(data) {
                $scope.data = data;
                console.log($scope.data);
                document.getElementById("label").innerHTML=data;
    })
    }

}])

目前在控制台日志中，我正在获取每个对象的详细信息，例如角色名称、引号等，并且在标签上我正在获取“对象对象”。但是我如何简单地检索报价并将其打印到标签上。

标签： angularjs

解决方案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <h1>Quote Generator</h1>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>

   
</head>
<body ng-app="myApp" ng-controller="quoteGenerator as vm">

<button id="btn" type="button" ng-click="generateQuote()"> Generate quote</button>

<button id="btn1" type="button" ng-click="test()"> Test</button>
<br>

<p>Output Message : {{label}}</p>
</body >
<script>
var app= angular.module('myApp',[]);
app.controller('quoteGenerator',['$scope','$http', function ($scope, $http) {
var html="https://thesimpsonsquoteapi.glitch.me/quotes";
 $scope.label = 'hello';
    $scope.generateQuote=function() {
        $http.get(html)
            .then(function(data) {
                $scope.data = data;
                console.log($scope.data);
                $scope.label = data.data[0].quote;
    })
    }

}])
</script>
</html>

推荐阅读