Gewusst wie: Aktualisieren von Ng-repeat Mit AngularJs

Ich bin erstellen einer Tabelle mit wenigen Daten. Ich don ' T wollen, laden Sie alle Daten auf einmal. Also ich erstelle eine Schaltfläche auf der Ansicht, wenn der Benutzer klicken Sie auf, dass buttoon dann traf es den server und nehmen Sie die nächsten 4 Datensätze. Zu einer Zeit nur 4 Daten. 

<div class="container" ng-controller="paginateEmail" >
    <div class="row" >
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">Fail Agent</h3>
            </div>
            <table class="table">
                <thead>
                <th>
                    Email
                </th>
                </thead>
                <tbody>
                    <tr ng-repeat="item in email1.emailList3">
                        <td>
                           {{item}}
                        </td>
                    </tr>
                </tbody>
            </table>
            <td>
                <form ng-controller="paginateEmail" ng-submit="submitForm()">
                    <button class="btn btn-default" type="submit">Previous</button>&nbsp;<button type="submit" class="btn btn-default">Next</button>
                </form>
            </td>
        </div>    
    </div>
</div>

- und controller-code ist -

basicInfo.controller("paginateEmail", function ($scope, $http) {
        $scope.email1 = {
            emailList3: []
        };
    var current=1    
    $scope.submitForm = function () {           
        $scope.email1.emailList3.length=0;
        $http({method: 'GET', url: "../Dashboard/failAgentsList?current="+current}).
            success(function (data) {
                var i = 0;                   
                for(i=0;i<data.list.length;i++){                        
                    $scope.email1.emailList3.push(data.list[i]);
                }                    
                current+=1
            });
        console.log(current)
    }
        $scope.submitForm();
    }
);

nach, dass die Daten erfolgreich gebunden, die mit dem Umfang.email1.emailList3 aber die Ansicht wird nicht aktualisiert. Ich möchte, dass nach dem anklicken der Schaltfläche weiter wird die Ansicht auch aktualisiert, mit neuen Daten, welche waren das binden der Schleife im controller.

Vielen Dank im Voraus.

  • Konnte Sie bewegen emailList3 werden direkt auf die $scope, d.h., $scope.emailList3 = []? Eckig ist nicht tief beobachten Sie Ihre Objekte, damit Sie nicht sehen, die änderung, aber wenn das array wurde direkt auf den Rahmen, es würde die Ansicht aktualisieren. Ansonsten könnten Sie nennen $scope.$apply() nach der for Schleife, aber ich würde versuchen, zu vermeiden, dass
  • $http gibt ein Versprechen, die behandelt werden können durch den Aufruf der Methode then. Verspricht sollte bereits integriert sein in das eckige Lebenszyklus; ich bin mir ziemlich sicher, dass, wenn Sie aktualisieren $scope.email1... in der Erfolgs-handler der Verheißung, sollte die Ansicht aktualisiert werden, ohne dass manuelle Aufruf $apply.
  • Ich habe einen kleinen Stift demonstrieren. $timeout gibt ein Versprechen, genau wie $http.
InformationsquelleAutor Md Samir | 2015-03-30
  1. 0

    Für dieses problem, das Sie hinzufügen können, setTimeout, aber es ist nicht der richtige Weg, dies zu tun, weil einige Male der server mehr Zeit zum abrufen von Daten.

    setTimeout(function () {        
    $scope.email1.length = 0;
    $http({method: 'GET', url: '../Dashboard/confirmAgentList'}).
        success(function (data) {
            var i = 0;
            for (i = 0; i < data.confAgentList.length; i++) {
                $scope.email1.push(data.confAgentList[i]);                    
                }
               //and write you additional logic here
            }
        })
}, 500);
    • Seine empfohlen, $timeout anstelle von setTimeout, die Griffe $scope.$richtig angewendet werden
    InformationsquelleAutor Samir
  2. 0

    Starten Sie eine digest-Zyklus haben Sie die Ansicht aktualisieren. In Ihrem Erfolgs-Methode verwenden, die $apply-Methode:

            success(function (data) {
            var i = 0;                   
            for(i=0;i<data.list.length;i++){                        
                $scope.email1.emailList3.push(data.list[i]);
            }          
            $rootScope.$apply();
            current+=1
        });
    • Aber ich bin immer diese Fehlermeldung wenn ich $rootScope.$apply(); ReferenceError: $rootScope ist nicht definiert
    • vielleicht auch nur $scope.$apply?
    • Dies ist eigentlich falsch, da $http.Erfolg erfolgt bereits innerhalb einer $scope.$anwenden, so sollten Sie nie brauchen, um dies zu tun, oder Sie werden beginnen, sehen [$rootScope:inprog] Fehler.
    InformationsquelleAutor Simon Staton
Schreibe einen Kommentar