javascript - Angular JS 和 Firebase 重复数据错误

Question

我遇到的问题是，当在车牌号、汽车品牌中插入文本并保存时，即使 Firebase 数据库显示正常数据，表格也会显示重复项。

查找问题的过程(请记住，您必须至少输入 3 次才能看到重复效果):输入车牌号和汽车品牌，只需输入随机文本即可。然后单击“保存”按钮。

Link to my plunker code, follow the procedure and you will see the problem

我的 script.js 代码，我相信问题就在这里。

angular.module('myApp', []);

angular.module('myApp').controller('customerCtrl', function($scope) {

  $scope.CustomerPlateNumber = "";
  $scope.CustomerCarBrand = "";
  $scope.customers = [];

  $scope.myData = new Firebase("https://sizzling-torch-2102.firebaseio.com/CustomerInformation");

  // PS, husk at CustomerPlatenumber: må være lik navnet på ng-model. 
  $scope.saveCustomerData = function() {
    $scope.myData.push({CustomerPlateNumber: $scope.CustomerPlateNumber, CustomerCarBrand: $scope.CustomerCarBrand});

  // Empty input after storing data
  $scope.CustomerPlateNumber = "";
  $scope.CustomerCarBrand = "";

  };

  // Two parameters, needs to know what its going to be fired upon, and a function that tells what to do when it is fired. 
  $scope.myData.on('value', function(snapshot) {
    var values = snapshot.val();
    for(var myVal in values)
    {
      var item = values[myVal];

      $scope.customers.push(item);
    }
    //not recommended, look at "refresh bindings angular"
    $scope.$apply(); 
  });
});

Answer 1

据我所知，您正在插入重复项，并且每当集合发生更改时，Firebase 都会返回整个集合，而不仅仅是添加的 项。因此，您有两个选择:保持原样和更改为:

$scope.myData.on('value', function(snapshot) {
  $scope.customers = snapshot.val();
  $scope.$apply(); //or you can use timeout here to be safer.
});

我通常不使用$apply，所以你也可以这样做:

$scope.myData.on('value', function(snapshot) {
  $timeout(function(){
       $scope.customers = snapshot.val();
  }); 
});

或者您可以使用 child_added 事件，您也可以使用它可能会更好。

$scope.myData.on('child_added', function(item) {
  console.log('child added', item);
  $timeout(function(){
     $scope.customers.push(item.val());
  }); 
 });