Question

由于某些未知原因，ng-repeat在从ng-route加载的模板文件中重复次数太多次了：

angular
  .module('myApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch'
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/items/item1', {
        templateUrl: 'items/item-review.html',
        controller: 'ItemController',
        controllerAs: 'myCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });

  });

HTML：

<div class="reviewItem" ng-repeat="reviewItem in myCtrl.prop">

    <div class="row">
      <div>{{reviewItem.name}} </div>
    </div>

</div>

它给了我5个循环，而不是数组中有json文件中有2个对象的对象数量：

[{
    "item": {
        "name": "content",
        "name2": "content2"
    }
}, {
    "item": {
        "name": "content",
        "name2": "content2"
    }
}]

控制器是这样的：

angular.module('dbreviewsApp')
  .controller('ItemController', function($scope, $http) {

    var myCtrl = this;
    myCtrl.prop=[];

        $http.get('items.json')
        .then(function(response) {

            myCtrl.prop = response;

        }, function(response) {

            //Second function handles error but there is no error during the get request

        });

});

Answer 1

问题在于您使用的技术来分配响应数据：

$http.get('items.json')
        .then(function(response) {

            myCtrl.prop = response; //<-- This is the problem.

            // Comment/remove the upper line and write it like
            myCtrl.prop = response.data;  // <-- Correct technique.

        }, function(response) {

            //Second function handles error but there is no error during the get request

        });

使用myCtrl.prop = response;属性来分配值，而不是data。比如myCtrl.prop = response.data;

并澄清为什么ng-repeat循环5次是因为response对象包含5个属性，即data, status, headers, config, statusText。

Answer 2

问题在于myCtrl.prop = response;，它应该是myCtrl.prop = response.data;。请找到有效的Plunker

  var myCtrl = this;
  myCtrl.prop = [];

  $http.get('items.json')
    .then(function(response) {

      myCtrl.prop = response.data;
      console.log(myCtrl.prop);

    }, function(response) {

      //Second function handles error but there is no error during the get request

    });

Answer 3

当你使用$ resource然后回复数据但是如果你使用$ http然后在你的response.data

中的数据

myCtrl.prop = response.data;

Answer 4

感谢您帮我解决问题。显然问题出在传递的对象中 - 默认情况下它有5个属性：config, data, headers, status, statusText，因此5次重复，＆＃34;数据＆＃34;目标不见了。

在ng-repeat中添加.data：myCtrl.prop.data解决了这个问题。 myCtrl.prop = response.data;也在运作。

ng-repeat循环次数过多

4 个答案: