ng 在 $http post 中填充的列表上重复显示空 html

Question

我真的是 angularjs 的新手，我正在尝试显示产品列表，因此我使用 $http 调用服务并在成功函数中填充 $scope。一切似乎都有效，$scope.list 包含产品 但没有显示任何内容

我已经看过这个，除了 "then" 函数外，其他一切看起来都一样，我想在我的例子中应该是成功函数。（因为如果我添加该函数，我会得到 $http(...).then(...).error is not a function）。

<div ng-app="myApp" ng-controller="myCtrl">
 <ul class="example-animate-container">
  <li class="animate-repeat" ng-repeat="item in $scope.list as results">
    item {{$index + 1}}:
    {{item.Brand}} 
  </li>
  <li class="animate-repeat" ng-if="results.length == 0">
    <strong>No results found...</strong>
  </li>
</ul>

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

app.controller('myCtrl', function($scope, $http) {
   var url = "http://localhost:50083/service.asmx/StylesMock";
   $scope.list = new Array();

   $http({method: 'POST', url: url, headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }})
   .success(function(xmlString){
     var parser = new DOMParser();
     var xml = parser.parseFromString(xmlString, "text/xml");
     jsonData = xmlToJson(xml);
     mapToScope($scope, jsonData);
   })
   .error(function(data, status, headers, config) { alert("error"); });;

  function mapToScope($scope, data){
    angular.forEach(data.ArrayOfStyleData.StyleData, function(value, key) {

      $scope.list.push({
        Brand : value.Style.Brand,
        Name : value.Style.Name,
        Image : value.Style.Image,
        Price : value.Style.StylePrice
      });
    });
  }
});

有什么想法吗？有没有办法了解问题出在哪里？控制台不显示错误

Answer 1

问题在于您的 HTML 删除 $scope 因为它已经在 angular 指令中

ng-repeat=列表中的项目

<div ng-app="myApp" ng-controller="myCtrl">
 <ul class="example-animate-container">
  <li class="animate-repeat" ng-repeat="item in list as results">
    item {{$index + 1}}:
    {{item.Brand}} 
  </li>
  <li class="animate-repeat" ng-if="results.length == 0">
    <strong>No results found...</strong>
  </li>
</ul>

Answer 2

正如我在评论中的回答：

将 $scope.list 替换为 list。默认情况下，angular 将在您的视图中引用相关控制器 $scope 本身。

因此，通过在您的视图中指定 $scope.list，angular 正在您的控制器中寻找 $scope.$scope.list

ng 在 $http post 中填充的列表上重复显示空 html

ng Repeat on a list populated in a $http post shows empty html

angularjs

angularjs-ng-repeat

angular-http