Question

您好我正在尝试显示我的数据，但是当我尝试使用角度数据在我的html上显示它时不会通过。检查控制台和数据是否存在。这是我的HTML。

<ion-view view-title="">  
<ion-content>
   <!--  <div class="cards">
        <div class="item item-image">
            <img src="img/banner-children.jpg"></img>
        </div>
    </div> -->

    <div class="list card padding" ng-repeat="charity in charityList">
    <a href="#/app/charitypage/{{charity.charity_id}}" class="positive ">
    <img class="char-logo img-thumb" ng-src="{{charity.logo}}">
        <div class="char-info">
            <h3 class="char-name text-pink">
            <i class="ion-chevron-right text-pink btn-category"></i>
            {{charity.charity_name}}</h3>
            <p class="dark">{{charity.description}}</p>
        </div>
        </a>
    </div>


</ion-content>

这是我的控制器

angular.module（'subCategory.controllers'，[]） .controller（'subCatCtrl'，function（$ scope，$ state，$ http）{

$scope.getCategoryList = function(category){
  $scope.charityList = {};
    var categoryListData = {
      charityCategory :  category
    }
 $http({
          method: 'POST',
          header: {'Content-Type' : 'application/x-www-form-urlencoded'},
          url: 'http://localhost/filantrome/Main/getCategoryList',
          data: categoryListData
        }).then(
        function success( response ) {

          $scope.charityList= response.data;                     
          console.log($scope.charityList);
             $state.go('app.subcat');
        },
        function error( response ) {
          $scope.charityList = response.data;
          console.log($scope.charityList);
          // handle error
        }
        );
       console.log($scope.charityList);

};

}）;

我可以在success函数中看到我在console.log（）上请求的数据。但是当我离开.then（）; function $ scope.charityList为空。我在这里失踪了什么？谢谢！

Answer 1

似乎问题在于状态变化。要解决此问题，您可以使用服务来存储收到的JSON

angular.module('subCategory.controllers', []).service(charityService, charityService);


  /* @ngInject */
function charityService($http) {
  var charityList = [];

  var service = {
    getData: getData,
    getCharityList: getCharityList  
  };


  return service;

  function getCharityList() {
      return charityList ;
  }
  function getData(categoryListData) {
    $http({
      method: 'POST',
      header: {'Content-Type' : 'application/x-www-form-urlencoded'},
      url: 'http://localhost/filantrome/Main/getCategoryList',
      data: categoryListData
    }).then(
    function success( response ) {

      charityList = response.data;                     
      console.log(charityList );

      $state.go('app.subcat'); // you can also change state here   
    },
    function error( response ) {
      $scope.charityList = response.data;
      console.log($scope.charityList);
      // handle error
    }
    );
  }

}

然后使用控制器功能发布数据

$scope.getCategoryList = function(category){
    var categoryListData = {
        charityCategory :  category
    }

    charityService.getData(categoryListData);        
}

状态更改控制器将从服务

获取charityList

angular.module('subCategory.controllers', []) .controller('subCatCtrl',
    function($scope, $state, $http, charityService) {
    $scope.charityList = charityService.getCharityList();

// ...

Answer 2

当您发布了console.log输出后，我可以看到您有一个对象正在接收并分配给charityList，但您在该元素上有一个ng-repeat。所以，我认为您应该将$scope.charityList = {};更改为$scope.charityList = [];，或者您可以在html中输出此变量，以查看最新情况，例如{{charityList}}。

数据停留在$ http .then方法中

2 个答案: