ngrepeat - 如何在從頂部刪除項目時保留AngularJS中的ng-repeat的滾動位置




ng repeat w3c (2)

我試圖從這個解決方案工作

如何在AngularJS中保留ng-repeat的滾動位置?

在刪除ng-repeat中的頂部項目時實現保持滾動位置,但是不能找出代碼來做到這一點。

此外,請注意,列表應該按照與items數組相同的順序進行打印,而不是像例子那樣反向打印。

解決方案的代碼是:

angular.module("Demo", [])

.controller("DemoCtrl", function($scope) {
  $scope.items = [];

  for (var i = 0; i < 10; i++) {
    $scope.items[i] = {
      id: i,
      name: 'item ' + i
    };
  }

  $scope.addNewItem = function() {
    $scope.items = $scope.items.concat({
      id: $scope.items.length,
      name: "item " + $scope.items.length
    });
  };
})

.directive("keepScroll", function(){

  return {

    controller : function($scope){
      var element = 0;

      this.setElement = function(el){
        element = el;
      }

      this.addItem = function(item){
        console.log("Adding item", item, item.clientHeight);
        element.scrollTop = (element.scrollTop+item.clientHeight+1); //1px for margin
      };

    },

    link : function(scope,el,attr, ctrl) {

     ctrl.setElement(el[0]);

    }

  };

})

.directive("scrollItem", function(){


  return{
    require : "^keepScroll",
    link : function(scope, el, att, scrCtrl){
      scrCtrl.addItem(el[0]);
    }
  }
})

我試圖做的是改變

element.scrollTop = (element.scrollTop + item.clientHeight+1)

element.scrollTop = (element.scrollTop - item.clientHeight+1)

並按“id”順序打印而不是“-id”


我希望$anchorScroll可以幫助你。 按照鏈接


我不知道如果我理解正確,但你可以實現你想要的東西聆聽項目數組和項目被刪除。

希望這會有所幫助

http://plnkr.co/edit/buGcRlVGClj6toCVXFKu?p=info

這是我做的:

為項目添加了一個高度屬性

for (var i = 0; i < 20; i++) {
    $scope.items[i] = {
        id: i,
        name: 'item ' + i,
        height: (Math.random()*100)+30
    };
}

style: height HTML文件內的style: height屬性

<div class="wrapper" keep-scroll>
    <div class="item" scroll-item ng-repeat="item in items" style="height:{{item.height}}px">
        {{ item.name }}
    </div>
</div>

deleteItem裡面的deleteItem方法

$scope.deleteItem = function() {
    var itemToDelete = $scope.items[0];
    $scope.items.splice(0,1);
    $scope.$broadcast("scrollFix",itemToDelete);
};

比我聽keepScroll指令內的scrollFix事件

$scope.$on('scrollFix',function(event,data){
   element.scrollTop = element.scrollTop - data.height;
});




angularjs-ng-repeat