Angularjs 离子/角度-从数据库获取数据-数据已加载，但现场无输出

我试图做一个数据库请求，并希望看到现场的输出。 数据已成功加载，但输出不起作用。我只是在照片上什么也没看到

以下是我的控制器的代码：

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站点的代码：

<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>

Du suchst gerade nach:{{search}
比萨饼
{{pizza.name}
价格：{{pizza.price}}欧元

洛申

失败是什么？ 下面是console.log的图片：

---

问题在于，您正在从控制器向服务发出请求，并且没有等到数据将被提取，所以您得到的对象是空的，因为立即返回

这个。pizzas

。相反，我们需要等待请求完成，然后将其附加到所需的范围

控制器：

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

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

// Get promise and wait until data will be fetched, then push to scope.
.controller('TestCtrl', function($scope, pizzaService) {
  pizzaService.all().then(function(payload) {
     $scope.pizzas = 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
  };

});

服务：

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

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

// Get promise and wait until data will be fetched, then push to scope.
.controller('TestCtrl', function($scope, pizzaService) {
  pizzaService.all().then(function(payload) {
     $scope.pizzas = 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
  };

});

注意：Angular$http函数是一个承诺，所以您不需要使用延迟的$q方法来包装它

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

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

查看：

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

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

// Get promise and wait until data will be fetched, then push to scope.
.controller('TestCtrl', function($scope, pizzaService) {
  pizzaService.all().then(function(payload) {
     $scope.pizzas = 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
  };

});

注意：您可以使用等待数据准备就绪 和/或

Du suchst gerade nach:{{search}
比萨饼
{{pizza.name}
价格：{{pizza.price}}欧元

洛申

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

    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");
        }
      };
    });

测试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>

Du suchst gerade nach:{{search}
比萨饼
{{pizza.name}
价格：{{pizza.price}}欧元

洛申

这里是截图

---

我看到了更多，但仍然不起作用。我发布了一个屏幕截图。啊，很简单-在这里你返回了一个有效载荷对象中的数据。只需从$scope.pizzas=有效负载更新范围；到$scope.pizzas=payload.data；