AngularFire在AngularJS数组中移除移位项

Question

在Firebase RESTful service上推送项目时请帮我预先添加项目，使用ng-repeat在DOM中显示新项目时，新项目应该排在最前面。

//post.js service
 var ref = new Firebase(FIREBASE_URL + 'posts');//creates posts object on root of url
 var posts = $firebase(ref);//we get posts Object from firebase
....
var Post = {
        create: function(post){
            return posts.$add(post);
        }
    .....
//posts.js controller
$scope.submitPost = function(){
    Post.create($scope.post).then(function(){
        console.log('success! post submitted'); 
    });
}

HTML:

<div class="col-xs-12" ng-repeat="(postId, post) in posts">
{{post.title}}
{{post.url}}
</div>

但是在DOM中，最新的项目位于底部，而我需要的新项目应该位于顶部。在AngularFire ($firebase)中有没有unshift方法?

Answer 1

如果您不想设置优先级，一个简单的解决方案是让Firebase对您的列表进行自然排序，并在客户端使用过滤器将其颠倒，例如:

angular.module("ReverseFilter",[])
  .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 (angular.isObject(list[k])) { out.push(list[k]); }
        }
      }
    }
    return out;
  }
  return function(items) {
    return toArray(items).slice().reverse();
  };
});

将这个模块依赖项添加到你的应用程序中，你将有一个过滤器，你可以在ng-repeat属性中使用，像这样:

(ng-repeat="(idx, entry) in journal.months[0] | reverse")

Answer 2

请记住，Firebase存储JSON对象，而不是数组，因此不可能对列表执行unshift操作应该是有意义的。(对于键按字典顺序排序的对象来说，这意味着什么?)如果你想让你的项目首先出现，你需要利用优先级和排序数据。或者，如果列表很简洁，只在客户端排序。

这是实现unshift的一种快速而肮脏的方法，尽管这几乎总是不如使用适当的数据排序或简单地使用endAt():

app.factory('OrderedList', function($FirebaseArray, $firebase, $firebaseUtils) {
   var OrderedList = $FirebaseArray.$extendFactory({
      unshift: function(data) {
         var self = this, list = this.$list;
         self.$add(data).then(function(ref) {
            var newId = ref.name();
            var pos = self.$indexFor(newId);
            if( pos > 0 ) {
               // place the item first in the list
               list.splice(0, 0, list.splice(pos, 1)[0]);
               // set list priorities to match
               self.reorder();
            }
         });
      },
      // order items by their current index in the list
      reorder: function() {
         var list = this.$list;
         angular.forEach(list, function(rec, i) {
           rec.$priority = i;
           list.$save(rec);
         });
      }
   });
   return function(ref) {
      return $firebase(ref, {arrayFactory: OrderedList}).$asArray();
   }
});

请记住，这个特定的示例不是并发安全的(如果多个用户同时修改同一个列表，将会产生一些不可预测的结果)。实现一个并发安全的解决方案是类似的，但是是特定于用例的(生成优先级的方法将取决于用例)。