2013-04-19 17 views
6

Es gibt eine Liste von Benutzern, die aus einer Ruhe-API abgerufen wurden. Hier ist die Vorlageangularjs ng-Wiederholungsliste nicht aktualisiert, wenn Element hinzugefügt/entfernt wird

<div ng:controller="UserController"> 
    <a ng-click="createUser()">Create User</a> 

    <div ng-view> 
     <ul> 
      <li ng-repeat="user in users"> 
       {[{user.first_name}]} {[{user.last_name}]} 
      </li> 
     </ul> 
    </div> 
</div> 

JS:

function UserController($scope, User, Group){ 
    $scope.users = User.query(); 

    $scope.createUser = function(){ 

     //$scope.users = null; 
     //$scope.users.pop(); 
     //$scope.users.push(new User({id:'5'})); 

     console.log($scope.users); 
    } 
} 

Der Service: http://dpaste.com/1065440/

Alle Benutzer ein abgerufen und korrekt aufgelistet. Das Problem ist, dass ich die gerenderte Liste überhaupt nicht manipulieren kann. Egal was ich mache, push, pop oder setze null. Die Liste ändert sich in der Vorlage nicht. Die letzte Protokollanweisung zeigt jedoch die Änderungen an, sie druckt z.B. NULL, wenn das Benutzerarray auf null gesetzt ist.

Irgendwelche Ideen, wo das Problem liegt?

+0

Wo rufst du createUser() an? Sie müssen wahrscheinlich eine Rückruffunktion zu query() hinzufügen und dann createUser() innerhalb des Callbacks aufrufen. –

+0

Entschuldigung, ich habe diesen Knopf verpasst. Ich habe meine Frage bearbeitet. –

+0

Überprüfen Sie meine Antwort, ich bearbeitet im Lichte der neuen Informationen, die Sie gepostet haben. – finishingmove

Antwort

5

Das Objekt, das Sie in das Feld schieben, es scheint das Problem in der Routing war. Derselbe äußere Controller wurde dem Partial zugewiesen, der in ng-view geladen wurde. Entfernen ng:controller="UserController" und Verschieben der createUser Schaltfläche auf die teilweise würde das Problem lösen, aber wenn es wirklich eine Notwendigkeit, die createUser Methode außerhalb von ng-view aufrufen, dann müssen alle damit verbundenen Daten in der äußeren Controller sein. Sie können also Ihren äußeren Controller unverändert lassen und Ihre Route ändern, um einen leeren Platzhalter-Controller zu verwenden.

+0

Was ist der Effekt eines neuen Benutzers? Macht das einen Anruf? Ich habe deinen Vorschlag ausprobiert, aber es funktioniert immer noch nicht. –

+0

Es macht das Objekt, das Sie in das Array einfügen, eine Instanz von User, wodurch es alle Instanzmethoden wie $ save usw. erbt. Kurz gesagt: hängt das Benutzerverhalten daran an. – finishingmove

+0

Und zeigt Ihr ng-repeat überhaupt etwas an? @artworkad シ – finishingmove

3

stellen Sie sicher, dass createUser aufgerufen wird. IE ng-Klick oder etwas.

<button type="button" ng-click="createUser()">Create User</button> 

Ihre Push-Funktion sieht korrekt aus, aber Ihre Bindung in HTML sieht falsch aus. Es sollte doppelte geschweifte Klammern sein.

Hinzugefügt Beispiel Ich habe zuvor beim Hinzufügen von Objekt verwendet. So eine Instanz von User

function UserController($scope, User){ 

    $scope.users = User.query(); 

    $scope.createUser = function(){ 
     $scope.users.push(new User({first_name:'Bob', last_name: 'Schmitt'})); 
    } 
} 

sein sollte, verwenden new User({})

Von unserem Gespräch

<div ng-app="main"> 
    <div ng-controller="MyCtrl"> 
     <button ng-click="add()" >Add</button> 
     <div id="container"> 
      <div ng-repeat="test in tests>{{test.name}}</div> 
     </div> 
    </div> 
</div> 


$scope.tests = {}; 

$scope.add = function() { 
    var newTest = {name: 'Test Message'}; 

    $scope.tests.push(newTest); 
}; 
+0

Ich habe diese Info verpasst, ich benutze benutzerdefinierte lockig und ich habe gerade diesen Knopf verpasst. Wird das nächste Mal korrekt sein. –

+0

Ahh, ich sehe kein Problem, dann haben Sie Breakpoints innerhalb Ihrer createUser-Funktion gesetzt, um zu sehen, ob sie getroffen wurde, und dann versuchen, das User-Objekt auf dem Bildschirm zum Debuggen auszudrucken. {{users}} –

+0

Ok. Siehe meine aktualisierte Frage. –

Verwandte Themen