So fügen Sie neue Objekte im Array von AngularJS zu Firebase hinzu, löschen und bearbeiten

Question

Ich habe diese Funktionen in einem Controller. Ich habe die Daten erfolgreich importiert, aber ich kann $add, $remove und $edit nicht verwenden. I Verwenden Sie $RootScope, da die Elemente, die gespeichert werden, sich in einem anderen Status und daher anderen Controller befinden. Ich bin neu darin, also würde ich die Hilfe wirklich schätzen.

angular 
    .module("") 
    .factory("Factory",function($http,$firebaseArray){ 

     var ref = new Firebase('https://****.firebaseio.com/'); 

       return{ 
       ref:$firebaseArray(ref) 
     } 
    }); 

      $scope.saveItems = function() { 
      console.log($scope.item); 
      $rootScope.items.push($scope.item); 

      $scope.item = []; 
      $mdSidenav('right').close(); 
     } 

     $rootScope.removeItems = function(item) { 
     var index = $rootScope.items.indexOf(item); 
     $rootScope.items.splice(index, 1);  
     }; 

      $rootScope.editItems=function(item){ 
      $rootScope.editing = true; 
      $mdSidenav('right').open(); 
      $rootScope.item=item; 

      $rootScope.saveEdit=function(){ 
       $rootScope.editing=false; 

       $mdSidenav('right').close(); 
      }; 
     }; 

Answer 1

Arrays in Firebase können ziemlich kompliziert sein. Es gibt a good post aus dem Firebase-Blog, der ein wenig in die Details kommt. Aber die größte Sache zu verstehen ist, dass die Arrays tatsächlich als Objekte gespeichert werden (was den Zugriff per Index schwierig machen kann) und es für mehrere Clients möglich ist, ein Array zur gleichen Zeit zu aktualisieren, was zu unerwarteten Ergebnissen führen kann.

In Ihrem Fall denke ich, dass es hilfreich ist, über den Datenfluss dessen nachzudenken, was durch Ihre App geht. Das Schöne am $ fireBaseArray ist, dass die Änderungen an alle verbundenen Clients gesendet werden, wenn dieses Array in Firebase aktualisiert wird.

In Ihrer Anwendung, anstatt etwas in $ rootScope zu aktualisieren, um die Änderungen in Ihrer Ansicht anzuzeigen, ist es sinnvoller, die Daten in Firebase zu aktualisieren und $ firebaseArray die Änderungen zu senden. Mit den mit Firebase-Arrays gelieferten Methoden können Sie dies direkt in Ihrer Ansicht tun (siehe HTML-Abschnitt unten).

// JavaScript 
var app = angular.module("ItemApp", ["firebase"]); 

app.controller("ItemCtrl", function($scope, $firebaseArray) { 
    var itemsRef = new Firebase("https://xxxx.firebaseio.com/items"); 
    $scope.items = $firebaseArray(itemsRef); 
    } 
]); 

Und in der Ansicht:

//HTML example with remove only, can apply to add or edit 
<ul> 
    <li ng-repeat="item in items"> 
    {{ item.property }} 
    <button ng-click="items.$remove(item)">x</button> 
    </li> 
</ul> 

Die große Veränderung ist hier nicht denken Sie über Ihre Daten auf der Client-Seite zu aktualisieren und dann die zu Firebase zurück, zu synchronisieren versuchen, sondern die aktualisieren Daten auf Firebase und lassen Sie dann die $ firebaseArray die Änderungen an den Client ausgleichen.

Die docs on synchronized arrays haben recht gute Details zu grundlegenden CRUD-Operationen, die Sie oben skizziert haben.