ng-model="query" 连接到 Firebase 后无法正常工作

Question

我正在处理的项目的一部分是列出成员、成员公司等...我在控制器中使用 $http 连接到 JSON 文件以连接所有内容并测试功能。我正在使用 ng-repeat 填充页面和 ng-scope 以允许访问者搜索列表。

在我连接 Firebase 以保存数据之前，一切都按预期进行。同样，数据填充页面，但现在我的 ng-model 已损坏，无法搜索列表。至少可以说，我的 Angular 技能仍在完善中，所以我确信我有一个菜鸟时刻。任何有机会有人可以看看，我将非常感激。这是我的代码。

我的控制器

.controller( 'AlliedCtrl', function AlliedCtrl( $scope, $firebase) {
    var ref = new Firebase("https://mybase.firebaseio.com/members");
    var sync = $firebase(ref);
    var syncObject = sync.$asObject();
    syncObject.$bindTo($scope, "members");
});

我的 HTML

<div class="search-sort">
                <div class="row">
                    <div class="col-sm-12 col-xs-12">
                        <input ng-model="query" placeholder="Search and Sort by Keyword e.g. Accounting, Law, Mobile etc..." class="small">
                    </div>
                    </div>
            </div>

            <table class="table table-condensed table-responsive">
                <thead>
                <tr>
                    <th></th>
                    <th>Member Company</th>
                    <th>Company Description</th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="m in members | filter:query">
                    <td style="width:250px"></td>
                    <td style="width:250px"><b>{{ m.company }}</b><br>{{ m.address }}<br>{{ m.address2 }}<br><a href="{{ m.url }}" target="_blank">{{ m.url }}</a><br><br>{{ m.name }}<br><em>{{ m.title }}</em><br>{{ m.phone }}<br><a mailto="{{ m.email }}">{{ m.email }}</a><br><br></td>
                    <td>{{ m.description }}</td>
                </tr>
                </tbody>
            </table>

Answer 1

如果我正确理解您的问题，您需要等到syncObject 加载完毕，所以...

//Controller
var members = syncObject.$loaded().then(function() {
  members.$bindTo($scope, "members");
}

Answer 2

如果您想对来自 Firebase 的集合使用 ng-repeat，则必须调用 $asArray 而不是 $asObject + $bindTo。

所以在你的控制器中：

var ref = new Firebase("https://mybase.firebaseio.com/members");
var sync = $firebase(ref);
var syncObject = sync.$asArray();
$scope.members = syncObject;