Angularjs метка, показывающая объект Object? - PullRequest
Новая
       9

Angularjs метка, показывающая объект Object?

0 голосов
/ 21 июня 2020

Я создаю программу, которая генерирует цитату каждый раз, когда вы нажимаете кнопку «Создать цитату». Я использую этот 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>

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

}])

В данный момент в журнале консоли я получаю данные каждого объекта, такие как имя персонажа, цитата и т. Д. c и на этикетке я получаю «объект объекта». Но как мне просто получить цитату и напечатать ее на этикетке.

Ответы [ 2 ]

0 голосов
/ 21 июня 2020 

<!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>
0 голосов
/ 21 июня 2020

В Angular вы не должны изменять DOM напрямую. Поэтому удалите эту строку: 

      document.getElementById("label").innerHTML=data;

Вместо этого измените HTML метки следующим образом: 

<label id="label" for="btn">{{data[0].quote}} - {{data[0].character}}</label>

Данные, которые вы получаете, представляют собой структурированный объект, вам нужно войти в каждый объект в списке и каждое его свойство для отображения значения внутри шаблона, как указано выше.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...