如何在从 AngularJS 到 Firebase 的数组中添加、删除和编辑新对象答案

【问题标题】：How to add , delete and edit new object in the array from AngularJS to Firebase如何在从 AngularJS 到 Firebase 的数组中添加、删除和编辑新对象
【发布时间】：2016-09-04 13:32:57
【问题描述】：

我在一个控制器中拥有这些功能。我成功导入数据，但无法使用$add、$remove 和$edit。我使用$RootScope，因为保存的项目处于不同的状态，因此是不同的控制器。我是新手，所以非常感谢您的帮助。

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();
            };
        };

【问题讨论】：

标签： angularjs firebase angularfire firebase-realtime-database

【解决方案1】：

Firebase 中的数组可能有点棘手。 Firebase 博客中的a good post 提供了一些详细信息。但最重要的是，数组实际上是作为对象存储的（这会使通过索引进行访问变得很棘手），并且多个客户端可能同时更新一个数组，这可能会导致意外结果。

在您的情况下，我认为考虑通过您的应用程序的数据流是有帮助的。 $firebaseArray 的美妙之处在于，每当该数组在 Firebase 上更新时，更改都会广播到所有连接的客户端。

在您的应用程序中，与其更新 $rootScope 上的某些内容以查看您的视图中反映的更改，更新 Firebase 上的数据并让 $firebaseArray 广播更改更有意义。使用 Firebase 数组提供的方法，您实际上可以直接在视图中执行此操作（请参阅下面的 HTML 部分）。

// 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);
  }
]);

在视图中：

//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>

这里最大的变化是不要考虑在客户端更新数据然后尝试将其同步回 Firebase，而是更新 Firebase 上的数据，然后让 $firebaseArray 将更改同步到客户端.

docs on synchronized arrays 对您上面概述的基本 CRUD 操作有很好的详细信息。

【讨论】：