ng-repeat nur aktualisieren nach dem Klicken auf eine andere Registerkarte oder Eingabe in ein Textfeld

Ich bin ziemlich neu zu eckig und hatte ein bisschen ein Problem bei dem Versuch, eine grundlegende "to-do" -Liste Art von App zu erstellen.ng-repeat nur aktualisieren nach dem Klicken auf eine andere Registerkarte oder Eingabe in ein Textfeld

Es gibt verschiedene Kategorien in der Seitenleiste, und der Benutzer kann auf eine Schaltfläche klicken, die eine modale Abfrage des Benutzers für den Namen einer neuen Kategorie anzeigt. Dieser Name wird verwendet, um eine neue Kategorie zu erstellen, die auf das bereits existierende Array geschoben wird.

Die neue Kategorie wird jedoch erst angezeigt, nachdem ich mit der Eingabe in ein anderes Textfeld auf dem Bildschirm begonnen habe oder auf eine andere Registerkarte geklickt habe.

Der Code, der relevant sein sollte:

var list = this; 

$(document).on("click", ".prompt", function(e) { 
bootbox.prompt("What do you want your new category to be?", function(result) {     
    if(result !== null) { 
     list.addCategory(result); 
    } 
}); 
}); 

this.addCategory = function(result) { 
    if(result.trim() != "") { 
    var newCategory = new Category(result); 
    list.categories.push(newCategory); 
    this.setCategory(newCategory); 
    } 
};

Ich kann nicht scheinen, um herauszufinden, wie HTML als Code-Block zu schreiben, aber hier sind die Richtlinien verwendet, um die Kategorien aufzulisten aus (mit categoryCtrl des Wesen Controller in Frage): ng-class="{active: categoryCtrl.isSet(category) }" ng-repeat="category in categoryCtrl.categories" ng-init="categoryCtrl.currCategory = categoryCtrl.categories[0]"

Ich weiß, dass das Array sofort aktualisiert wird - wenn ich eine Warnung hinzufügen 'bootbox.alert (list.categories [list.categories.length-1] .name)' die Warnung gibt mir wie auch immer die Eingabe war, wie es sein sollte. Es erscheint einfach nicht in der ng-Wiederholung.

Eine andere interessante Beobachtungen ist, dass die ng-init die this.setCategory(newCategory) überschreibt - so scheint es, dass, wenn die Liste aktualisiert wird, es zu seinem ng-init Wert zurückkehrt.

An anderen Stellen, an denen ich ein ng-repeat eines Arrays habe, wird es automatisch aktualisiert, wenn etwas Neues hineingedrückt wird. Ich frage mich, ob es etwas mit dem Modal/Verwendung der Bootbox zu tun haben - überall sonst Dinge werden entweder durch ein Kontrollkästchen hinzugefügt oder etwas in eine Textbox auf dem Bildschirm eingeben, das ist der einzige Ort, an dem ein Modal verwendet wird.

Quelle

2016-06-30 Shallac

versuchen Sie den Push innerhalb '$ scope. $ Apply (function() {// hier})' – theblindprophet

Hier ist ein funktionierendes plunker based on your code.

Die App wie unten aussieht. Ich initialisiere ein Array mit Dummy-Daten für das Beispiel, aber ein leeres Array würde auch funktionieren. Ich habe die vm = diese Syntax ähnlich wie Sie verwendet. Wenn $ nbBootbox.prompt Aufruf gibt es ein Versprechen, so dass Sie das dann() Syntax wie unten verwenden müssen:

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

    app.controller('MainCtrl', ['$scope', '$ngBootbox', function($scope, $ngBootbox) { 
     var vm = this; 

     vm.name = 'World'; 
     vm.categories = ['Category 1', 'Category 2']; 

     vm.prompt = function() { 

     $ngBootbox.prompt('Enter a new category?') 
      .then(function(result) { 
      console.log('Prompt returned: ' + result); 
      vm.categories.push(result); 
      }, function() { 
      console.log('Prompt dismissed!'); 
      }); 

     } 
    }]);

Um Ihre HTML-kantiger zu machen, wie ich es so weit verändert und auch die ControllerAs Syntax:

<body ng-controller="MainCtrl as vm"> 
    <p>Hello {{vm.name}} !</p> 
    <ul> 
    <li ng-repeat="c in vm.categories">{{c}}</li> 
    </ul> 
    <a href="" ng-click="vm.prompt()">Add Category</a> 
</body>

so ruft der Link, um die Eingabeaufforderung() Funktion ... es die modale öffnet und wenn Sie in der Kategorie eingeben, schiebe ich es auf die Array Kategorie und es wird automatisch auf der Seite als eine neue Kugel hinzugefügt Zeigen Sie in der Liste der Kategorien.

From the documentation: $ ngBootbox.prompt (msg)

Gibt ein Versprechen, das aufgelöst wird, wenn vorgelegt und wenn abgewiesen zurückgewiesen.

Beispiel

$ngBootbox.prompt('Enter something') 
    .then(function(result) { 
     console.log('Prompt returned: ' + result); 
    }, function() { 
     console.log('Prompt dismissed!'); 
    });

Hoffnung, das hilft. Lass uns wissen.

Quelle

2016-07-01 01:11:09 Gregori

Danke für die detaillierte Antwort! Das hat perfekt funktioniert – Shallac

ng-repeat nur aktualisieren nach dem Klicken auf eine andere Registerkarte oder Eingabe in ein Textfeld

Antwort

Verwandte Themen