离子/角度 - 从数据库获取数据 - 数据加载，但没有现场输出 [英] ionic/angular - get data from database - data loaded, but no output on site

问题描述

我尝试做一个数据库请求，并希望看到现场的输出。
数据成功加载，但输出不工作。

i try to do an database-request and want to see the output on site. The data is successfully loaded, but the output doesn't work. I just see nothing in the .

这是我的控制器的代码：

Here is the code of my controller:

angular.module('starter.controllers', [])

.controller('DashCtrl', function($scope) {})

.controller('TestCtrl', function($scope, pizzaService) {
  $scope.pizzas = pizzaService.all();
})

.controller('ChatsCtrl', function($scope, Chats) {
  $scope.chats = Chats.all();
  $scope.remove = function(chat) {
    Chats.remove(chat);
  }
})

.controller('ChatDetailCtrl', function($scope, $stateParams, Chats) {
  $scope.chat = Chats.get($stateParams.chatId);
})


.controller('AccountCtrl', function($scope) {
  $scope.settings = {
    enableFriends: true
  };

});

这里是我的服务代码：

angular.module('starter.services', [])
.factory('pizzaService', function($http) {
var pizzas = {};
  $http.get("http://localhost/whatever/www/php/load_Pizzas.php").success(function(data){
  this.pizzas = data;
  console.log('success - pizzas loaded');
  console.log(this.pizzas);
  });

  return {
    all: function() {
      return this.pizzas;
    }
  };
});

这里html网站的代码：

And here the code of the html-site:

<ion-view view-title="Pizzas">
<ion-content>
<label class="item item-input">
<input type="text" ng-model="search" placeholder="Suchtext">
</label>
<p ng-show="search">Du suchst gerade nach: {{search}}</p>
<ion-search placeholder="ion Suche" filter="search"></ion-search>
<ion-list>

<ion-item class="item-divider">Pizzas</ion-item>

<ion-item ng-repeat="pizza in pizzas.pizzas | filter:search" class="item-remove-animate item-icon-right">
<h2>{{pizza.name}}</h2>
<p>Preis: {{pizza.price}} Euro</p>
<i class="icon ion-chevron-right icon-accessory"></i>
<ion-option-button class="button-assertive" >
Löschen
</ion-option-button>
</ion-item>

</ion-list>
</ion-content>
</ion-view>

什么是失败？
这里是console.log的一个图片：
图片

推荐答案

Controller.js

Controller.js

angular.module('starter.controllers', [])

.controller('DashCtrl', function($scope) {})

.controller('TestCtrl', function($scope, pizzaService) {
  pizzaService.all().then(function(payload) {
     $scope.pizzas = payload;
     console.log(payload);
  });
})

.controller('ChatsCtrl', function($scope, Chats) {
  $scope.chats = Chats.all();
  $scope.remove = function(chat) {
    Chats.remove(chat);
  }
})

.controller('ChatDetailCtrl', function($scope, $stateParams, Chats) {
  $scope.chat = Chats.get($stateParams.chatId);
})

.controller('AccountCtrl', function($scope) {
  $scope.settings = {
    enableFriends: true
  };

});

Service.js

Service.js

    angular.module('starter.services', [])
    .factory('pizzaService', function($http) {

      return {
        all: function() {
          // Return promise (async callback)
          return $http.get("http://localhost/soundso/www/php/load_Pizzas.php");
        }
      };
    });

test html

test html

<ion-view view-title="Pizzas">
  <ion-content>
    <label class="item item-input">
        <input type="text" ng-model="search" placeholder="Suchtext">
    </label>
    <p ng-show="search">Du suchst gerade nach: {{search}}</p>
    <ion-search placeholder="ion Suche" filter="search"></ion-search>
    <ion-list>

      <ion-spinner ng-show="!pizzas" icon="spiral"></ion-spinner>

      <ion-item class="item-divider">Pizzas</ion-item>

      <ion-item ng-repeat="pizza in pizzas | filter:search" class="item-remove-animate item-icon-right">
        <h2>{{pizza.name}}</h2>
        <p>Preis: {{pizza.price}} Euro</p>
        <i class="icon ion-chevron-right icon-accessory"></i>
        <ion-option-button class="button-assertive" >
          Löschen
        </ion-option-button>
      </ion-item>

    </ion-list>
  </ion-content>
</ion-view>

这里有一个截图

And here a screenshot

这篇关于离子/角度 - 从数据库获取数据 - 数据加载，但没有现场输出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！