javascript - AngularJS $http.get 请求不在 Ionic 中显示数据

标签 javascript angularjs ionic-framework angularjs-http

我是 AngularJS 的新手,在使用了几个 youtube 教程中所示的命令并阅读了文档之后,我似乎无法使用 $http.get() 请求在 API 上显示数据。

JavaScript 和 html 代码:

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

exampleApp.controller('exampleController', function($scope, $http){
  
  $scope.getData=function(){
      $http.get("https://p3ddibjuc6.execute-api.us-west-2.amazonaws.com/prod/entries")
    .success(function(data){
      $scope.Date= data.Date;
      $scope.message= data.message;
    })
    .error(function(data){
      alert("error");
    })
  };
} );
!DOCTYPE html>
<html ng-app="app">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link href="https://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
    <script src="https://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
  </head>
  <body ng-app="app">
    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Awesome App</h1>
      </ion-header-bar>
      <ion-content class="padding" ng-controller="exampleController">
        <button class="button button-assertive" ng-click="getData()">click</button>
        <br>
        MESSAGE: {{message}}
        <br>
        Date: {{Date}}
      </ion-content>
    </ion-pane>
  </body>
</html>

enter code here

最佳答案

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

exampleApp.controller('exampleController', function($scope, $http){

  $scope.getData=function(){
      $http.get("https://p3ddibjuc6.execute-api.us-west-2.amazonaws.com/prod/entries")
    .then(function(response){
      var data = response.data;
      $scope.Date= data.items[0].Date;
      $scope.message= data.items[0].message;

//for iterate do somethin lik this
      $scope.info = data.items;
    })
    .catch(function(response){
      alert("error");
    })
  };
});

如果你想要第一个 Date 和 Message i 你想要全部。 你需要在你的 html 中使用 ng-repeat 来迭代来自 api 的数据。

在html中

<div ng-repeat="item in info"> 
Date: {{item.Date}}
message: {{item.message}}
</div>

关于javascript - AngularJS $http.get 请求不在 Ionic 中显示数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45247721/

相关文章:

javascript - 使用 Open Graph API 在 Facebook 上共享全景 (360°) 图像时出现问题

javascript - innerHTML 仅在 Chrome 中编码

javascript - AngularJs:指令 Controller 内的 document.body.onfocus

javascript - 长时间保持的 AJAX 连接被防病毒软件阻止

javascript - 除了显示 jQuery Ajax DataTable 的数量之外,如何将分页下拉列表移动到底部

javascript - curl:-d 和 --data-binary 选项有什么区别?

javascript - 如何在 javascript 中添加新的 json 节点

android - ionic 1、 ionic 和 ionic 3 之间有什么区别? ionic 2 和 ionic3 是一样的吗?

javascript - 垂直滚动时不允许水平滚动(反之亦然)

javascript - 如何使用 AngularJS 和 ng-click 折叠和展开多个部分