ng-repeat-Schleifen zu oft

Question

Aus unbekannten Gründen ng-Wiederholung zu oft in der Template-Datei von der ng-Route geladen wiederholt:

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> 

Es gibt me 5 Schleifen statt der Menge an Gegenständen in der Anordnung, die in 2-Objekte json Datei hat:

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

die Steuerung geht wie thi s:

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

Das Problem ist mit der Technik, die Sie verwenden die Antwortdaten zuweisen zurück:

$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 

     }); 

Statt myCtrl.prop = response;, verwenden Sie die data Eigenschaft den Wert zuweisen; wie myCtrl.prop = response.data;

Und zu klären, warum Ihre ng-repeat für 5mal geloopt ist, weil das response Objekt enthält 5 Objekte nämlich data, status, headers, config, statusText.

Answer 2

Problem ist mit myCtrl.prop = response; sollte es myCtrl.prop = response.data; sein. finden Sie die Arbeits 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

wenn Sie $ Ressource dann Daten in Reaktion verwenden, aber wenn Sie verwenden $ http dann Daten in Ihrem response.data

myCtrl.prop = response.data; 

Answer 4

Dank für die Hilfe zu beheben. Anscheinend war das Problem im übergebenen Objekt - standardmäßig hat es 5 Eigenschaften: config, data, headers, status, statusText, daher die 5-malige Wiederholung, "Daten" Targeting fehlte.

Hinzufügen von .data in der ng-repeat: myCtrl.prop.data löste das Problem. myCtrl.prop = response.data; funktioniert auch.