【问题标题】:AngularFire add in reverse orderAngularFire以相反的顺序添加
【发布时间】:2014-01-05 12:30:30
【问题描述】:

我需要以相反的顺序将对象添加到 Firebase。或者在进行数据绑定时反转数据。或按创建时间对对象进行排序。

var ref = new Firebase("https://[url].firebaseio.com/");
$scope.messages = $firebase(ref);

$scope.addMessage = function(e) {
    $scope.messages.$add({title: $scope.title, body: $scope.msg, time: $scope.getDate() });
}

<div class="well span3 pull-left note" ng-repeat="(key, msg) in messages">

    <button type='button' class='close' ng-click="messages.$remove(key)">×</button>
    <b>{{msg.time| date: 'medium'}}</b>
    <span>{{msg.title}}</span>
    <span>{{msg.body}}</span>
    <button ng-click="changeMessage(key)" class="btn btn-mini pull-right"><i class="icon-pencil"></i></button>      
</div>  

我尝试对 ng-repeat 使用 OrderBy 属性,但这并不容易,因为消息中存储了对象。

【问题讨论】:

    标签: angularjs firebase angularfire


    【解决方案1】:

    查看chat example in angularFire-seed。它使用custom reverse filter

    反向过滤器看起来像这样:

    app.filter('reverse', function() {
          function toArray(list) {
             var k, out = [];
             if( list ) {
                if( angular.isArray(list) ) {
                   out = list;
                }
                else if( typeof(list) === 'object' ) {
                   for (k in list) {
                      if (list.hasOwnProperty(k)) { out.push(list[k]); }
                   }
                }
             }
             return out;
          }
          return function(items) {
             return toArray(items).slice().reverse();
          };
       });
    

    而且用法是这样的:

    <ul id="messages" ng-show="messages">
        <li ng-repeat="message in messages | reverse">{{message.text}}</li>
    </ul>
    

    【讨论】:

    • orderByPriority 链接已损坏;它只是转到 AngularFire 文档的根目录。 AngularFire API 参考也不在任何地方包含“orderByPriority”。此外,聊天示例不再在 HTML 中使用 orderByPriority。我猜这个答案已经完全过时了?
    • 啊哈,所以在我看来,相关文档现在位于 firebase.com/docs/web/libraries/angular/…,其中指出 您可以应用查询和限制来同步数据子集。 并提供一个代码示例。我猜自编写此答案以来,用于执行此操作的 AngularFire API 发生了变化,因为它似乎与此答案中的内容不匹配?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2023-03-31
    • 2016-04-22
    • 2023-04-01
    • 2013-02-05
    • 2011-11-12
    • 1970-01-01
    • 2016-09-20
    相关资源
    最近更新 更多