具有 3 向绑定的 Angular Firebase 过滤数据答案

【问题标题】：Angular firebase filtering data with 3-way binding具有 3 向绑定的 Angular Firebase 过滤数据
【发布时间】：2014-02-14 00:23:51
【问题描述】：

我有一个带有数据数组的简单 Angular 应用程序：

app.js

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

myApp.controller('Ctrl', function ($scope) {
    $scope.data = [
      {name: "Alice", age: 28},
      {name: "Bob", age: 55},
      ...
    ];
});

index.html

<input type="text" ng-model="data.search">
<table>
  <tbody>
     <tr ng-repeat="row in data | filter:data.search">
        <td>{{ data.name }}</td>
         <td>{{ data.age }}</td>
      </tr>
   </tbody>
 </table>

现在，我想开始使用firebase 服务来体验酷炫的三向绑定。所以我做了这样的事情：

app.js

var myApp = angular.module('myApp', ['firebase']);

myApp.controller('Ctrl', function ($scope) {
    var ref = new Firebase("https://<myapp>.firebaseio.com/");
    // assume there is already data in here similar to above
    $scope.data = $firebase(ref);
});

当然现在我的搜索过滤器坏了，因为$scope.data 是一个对象而不是一个数组。我当然可以转换数据，但这会破坏自动 3 向绑定。

所以我的问题是 - 如何在保持三向关系的同时将过滤器应用于这些数据？

【问题讨论】：

那么$scope.data来自Firebase的时候怎么看（没用过）
类似：{"-JFhWFuhkviwWDb2Ud23":{"food":"Mussels","name":"Roy"},"-JFhWS6PUxI3S-MLfFHm":{"food":"Burgers","name":"Terry"}}
呸，真丑。我真的看到了 2 个选项.. 一个函数来转换数据并将其重新应用于范围，或者创建一个自定义过滤器函数（我相信这可能需要一个数组）
是的 - 我对自定义过滤器进行了一些尝试，但无法使其正常工作。
我认为转换可能是你最好的选择，我可以发布一个快速的 3 行函数来解决问题

标签： angularjs firebase

【解决方案1】：

您可以先使用orderByPriority 过滤器将对象转换为数组：

<tr ng-repeat="row in data | orderByPriority | filter:data.search">

或者，您可以使用控制器中的过滤器来确保 $scope.data 是一个开头的数组。

【讨论】：

保存的项目需要设置优先级吗？添加此过滤器不会更改我的代码中的任何内容。
！浪费了这么多时间调试它。最终要在 SO 上创建新帖子，而这个问题与 related 相关。这远非显而易见，应该以某种方式记录下来。我的测试用例 plunkr：plnkr.co/edit/N4zcF1EBtvw8ktKpr6c7?p=preview
orderByPriority 即使没有关联的优先级也可以工作 - 在这种情况下，它们只是按键名排序。
是的，orderByPriority 是解决方案。似乎缺乏这方面的文档，这可能会阻止采用firebase，因为没有人愿意失去 Angular 过滤器。谢谢！

【解决方案2】：

Anant 的建议有效。工作小提琴：http://jsfiddle.net/rwk1/vqVw7/

还不能作为评论发布。

HTML

<div ng-app="myApp">
  <div ng-controller="testController">
    <input type="text" ng-model="search.searchText"></input>

    <div>
        <ul ng-repeat="person in people | orderByPriority | filter:search.searchText">
            <li>name:{{ person.name }}</li>
            <li>age:{{ person.age }}</li>
        </ul>

        <input type="text" placeholder="name" ng-model="newPerson.name"/>
        <input type="text" placeholder="age" ng-model="newPerson.age"/>
        <button type="submit" ng-click="addPerson()">Add New Person</button>
    </div>
  </div>      
</div>

var myApp = angular.module('myApp', ["firebase"]);

myApp.controller('testController', function ($scope, $firebase) {
    $scope.data = [{
        name: "Alice",
        age: 28
    }, {
        name: "Bob",
        age: 55
    }];

    var peopleRef = new Firebase("https://sqt.firebaseio.com/people");
    // Automatically syncs everywhere in realtime
    $scope.people = $firebase(peopleRef);

    $scope.addPerson = function(){
        $scope.people.$add($scope.newPerson);
        $scope.newPerson = "";
    };

【讨论】：