angularjs - controles - ng-if
Cómo retener la posición de desplazamiento de ng-repeat en AngularJS al eliminar un elemento de la parte superior (3)
Espero que $anchorScroll pueda ayudarte. Sigue el enlace .
Traté de trabajar desde la solución a esto
Cómo retener la posición de desplazamiento de ng-repeat en AngularJS?
para lograr mantener la posición de desplazamiento al quitar el elemento superior en una repetición ng pero no se pudo deducir el código para hacerlo.
Además, nota al margen, la lista debe imprimirse en el mismo orden que la matriz de elementos, no en el reverso como lo hace el ejemplo.
El código de la solución:
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]);
}
}
})
Lo que intenté hacer fue cambiar
element.scrollTop = (element.scrollTop + item.clientHeight+1)
a
element.scrollTop = (element.scrollTop - item.clientHeight+1)
e imprimiendo en orden por ''id'' no ''-id''
No estoy seguro de si entiendo correctamente, pero puede lograr lo que quiere con la selección de la matriz de elementos y el elemento que se eliminará.
Espero que esto ayude
http://plnkr.co/edit/buGcRlVGClj6toCVXFKu?p=info
Esto es lo que hice:
Se agregó una propiedad de altura para los artículos
for (var i = 0; i < 20; i++) {
$scope.items[i] = {
id: i,
name: ''item '' + i,
height: (Math.random()*100)+30
};
}
style: height propiedad de style: height dentro del archivo html
<div class="wrapper" keep-scroll>
<div class="item" scroll-item ng-repeat="item in items" style="height:{{item.height}}px">
{{ item.name }}
</div>
</div>
método deleteItem dentro de DemoCtrl
$scope.deleteItem = function() {
var itemToDelete = $scope.items[0];
$scope.items.splice(0,1);
$scope.$broadcast("scrollFix",itemToDelete);
};
Luego escucho el evento scrollFix dentro de la directiva keepScroll
$scope.$on(''scrollFix'',function(event,data){
element.scrollTop = element.scrollTop - data.height;
});
Creo que la solución inicial es un poco hacky ... pero aquí está una edición en funcionamiento usándola como base.
El problema es que la solución depende de los elementos que se agregan a la repetición ng. Si observa la directiva scrollItem, solo hace que la directiva keepScroll reajuste scrollTop si se ejecuta el enlazador. Esto solo ocurre cuando los artículos se agregan, no se eliminan.
En cambio, la edición escucha el scope.$on(''$destroy'') evento. El problema en este punto es, sin embargo, que el elemento ya no tiene un valor de cliente porque se ha eliminado del DOM. Entonces la solución es guardar su altura cuando se crea, y luego decirle a keepScroll cuál era la altura del elemento eliminado.
Nota: Esto pareció causar un salto de desplazamiento si el desplazamiento fue hasta el final, por lo que tendría que considerar ese caso como una excepción.
Trabajando JSBin: http://jsbin.com/geyapugezu/1/edit?html,css,js,output
Para referencia:
HTML
<!DOCTYPE html>
<html>
<head>
<script src="//code.angularjs.org/1.3.0-beta.7/angular.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-app="Demo" ng-controller="DemoCtrl">
<div class="wrapper" keep-scroll>
<div class="item" scroll-item ng-repeat="item in items | orderBy: ''id''">
{{ item.name }}
</div>
</div>
<button ng-click="removeItem()">
Remove item
</button>
</body>
</html>
CSS
.wrapper {
width: 200px;
height: 300px;
border: 1px solid black;
overflow: auto;
}
.item {
background-color: #ccc;
height: 100px;
margin-bottom: 1px;
}
JS
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.removeItem = function() {
$scope.items = $scope.items.slice(1);
};
})
.directive("keepScroll", function(){
return {
controller : function($scope){
var element = 0;
this.setElement = function(el){
element = el;
};
this.itemRemoved = function(height){
element.scrollTop = (element.scrollTop - height - 1); //1px for margin
console.log("Item removed", element.scrollTop);
};
},
link : function(scope,el,attr, ctrl) {
ctrl.setElement(el[0]);
}
};
})
.directive("scrollItem", function(){
return {
require : "^keepScroll",
link : function(scope, el, att, scrCtrl){
var height = el[0].clientHeight;
scope.$on(''$destroy'', function() {
scrCtrl.itemRemoved(height);
});
}
};
});
EDITAR
O bien, haz esto. No es necesario scrollItem, en su lugar observamos cambios en los elementos ng-repeat y reajustamos scrollTop en consecuencia.
JSBin: http://jsbin.com/dibeqivubi/edit?html,css,js,output
JS
angular.module("Demo", [])
.controller("DemoCtrl", [''$scope'', function($scope) {
$scope.items = [];
for (var i = 0; i < 10; i++) {
$scope.items[i] = {
id: i,
name: ''item '' + i
};
}
$scope.removeItem = function() {
$scope.items = $scope.items.slice(1);
};
}])
.directive("keepScroll", function() {
return {
link : function(scope,el,attr, ctrl) {
var scrollHeight;
scope.$watchCollection(''items'', function(n,o) {
// Instantiate scrollHeight when the list is
// done loading.
scrollHeight = scrollHeight || el[0].scrollHeight;
// Adjust scrollTop if scrollHeight has changed (items
// have been removed)
el[0].scrollTop = el[0].scrollTop - (scrollHeight - el[0].scrollHeight);
// Remember current scrollHeight for next change.
scrollHeight = el[0].scrollHeight;
});
}
};
});
HTML
<!DOCTYPE html>
<html>
<head>
<script src="//code.angularjs.org/1.3.0-beta.7/angular.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-app="Demo" ng-controller="DemoCtrl">
<div class="wrapper" keep-scroll>
<div class="item" ng-repeat="item in items | orderBy: ''id''">
{{ item.name }}
</div>
</div>
<button ng-click="removeItem()">
Remove item
</button>
</body>
</html>