【问题标题】:Angular JS search filter is not filtering the data by using FirebaseAngular JS 搜索过滤器不使用 Firebase 过滤数据
【发布时间】:2016-02-10 12:38:03
【问题描述】:

我遇到的问题是搜索过滤器没有过滤表格。关于问题可能是什么的任何建议或帮助?我正在制作的应用程序很简单,用户应输入两个文本字符串并将其保存,以便将数据存储在 firebase 数据库中。然后通过搜索筛选能够。但是,搜索不起作用。

Click here to access plunker

索引.html

 <table class="table table-bordered">
  <thead>
    <th>Plate Number</th>
    <th>Car Brand</th>
  </thead>
  <tbody>
    <tr ng-repeat="customer in customers | filter:search">
      <td>{{customer.CustomerPlateNumber}}</td>
      <td>{{customer.CustomerCarBrand}}</td>
    </tr>
  </tbody>
</table>

script.js(使用 firebase)

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) {
    $scope.customers = snapshot.val();
    //not recommended, look at "refresh bindings angular"
    $scope.$apply(); 
  });

});

【问题讨论】:

    标签: javascript angularjs filter firebase plunker


    【解决方案1】:

    问题在于 $scope.customers 不是数组 [] 而是复杂的 JavaScript 对象 {}。

    如果您将其更改为:

    $scope.customers=[];
    

    并将 Firebase 返回的复杂哈希表转换为数组,它可以工作(为了解释,我首先检查 Firebase 是否有返回数组的方法,而不是使用这个特定的解释代码):

    $scope.myData.on('value', function(snapshot) {
    var values = snapshot.val();
    for(var myVal in values)
    {
      var item = values[myVal];
    
      $scope.customers.push(item);
    }
    });
    

    【讨论】:

    • 谢谢 Daniel Lesser,这非常有效。我会检查firebase是否有返回数组的方法。
    猜你喜欢
    • 2017-04-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-03-06
    • 1970-01-01
    相关资源
    最近更新 更多