Angularjs 带3路绑定的角度firebase过滤数据

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

app.js

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

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

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

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>

当然，现在我的搜索过滤器中断了，因为

$scope.data

是一个对象而不是数组。当然，我可以转换数据，但这会破坏自动3路绑定

---

因此，我的问题是-在维护三方关系的同时，应如何将筛选器应用于此数据？

您可以首先使用

orderByPriority

筛选器将对象转换为数组：

---

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

您可以首先使用

orderByPriority

过滤器，将对象转换为数组：

---

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

Anant的建议有效。工作小提琴：

还不能作为评论发布

HTML

---

阿南特的建议奏效了。工作小提琴：

还不能作为评论发布

HTML

---

那么

$scope.data

来自

Firebase

（没有使用过它）的时候是什么样子的：

{“-jfhwfhuhkwiwwdb2ud23:{“食物”：“贻贝”，“名字”：“罗伊”}，“-JFhWS6PUxI3S MLfFHm:{“食物”：“汉堡包”，“名字”：“特里”}

嘎。我真的看到了两个选项..一个用于转换数据并将其重新应用到作用域的函数，或者创建一个自定义筛选函数（我认为可能需要一个数组）是的-我尝试了一些自定义筛选，但无法使其工作。我想转换可能是你最好的选择，我可以发布一个快速的三行函数来做这个小把戏，

$scope.data

当它来自

Firebase

（还没有使用它）类似于：

{“-jfhwfuhkwiwwdb2ud23:{“食物”：“贻贝”，“名字”：“罗伊”}，-jfhhws6puxi3s MLfFHm:{“食物”：“汉堡”，“名字”：“特里”}

Gah，这太难看了。我真的看到了两个选项..一个用于转换数据并将其重新应用到作用域的函数，或者创建一个自定义筛选函数（我认为可能需要一个数组）是的-我尝试了一些自定义筛选，但无法使其工作。我想转换可能是你最好的选择，我可以发布一个快速的三行函数，这将做的trickDo保存的项目需要设置优先级？添加此筛选器不会更改我的代码中的任何内容。！浪费了这么多时间调试它。最终，他打算在SO上创建一个新的帖子，而这个问题正是相关的。这远非显而易见，应该以某种方式加以记录。我的测试用例plunkr:orderByPriority即使没有关联的优先级也可以工作——在本例中，它们只是按键名排序。是的，

orderByPriority

是解决方案。似乎缺乏相关文档，这可能会阻碍采用

firebase

，因为没有人希望丢失角度过滤器。谢谢保存的项目是否需要设置优先级？添加此筛选器不会更改我的代码中的任何内容。！浪费了这么多时间调试它。最终，他打算在SO上创建一个新的帖子，而这个问题正是相关的。这远非显而易见，应该以某种方式加以记录。我的测试用例plunkr:orderByPriority即使没有关联的优先级也可以工作——在本例中，它们只是按键名排序。是的，

orderByPriority

是解决方案。似乎缺乏相关文档，这可能会阻碍采用

firebase

，因为没有人希望丢失角度过滤器。谢谢

<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 = "";
    };