다시 실행 - 대용량 데이터에 대해 각도 j를 사용하여 실행 취소 기능을 수행합니다.

Question

현재 동적으로 여러 행이 추가됩니다 (Excel과 유사). 테이블에 수백만 행이있을 수 있습니다.

다시 실행/실행 취소 기능에 대해서는 Angular-Chronicle을 사용했습니다. 이제 행 수가 100 개가 될 때 완벽하게 작동하도록 다시 실행/실행 취소하십시오. 데이터가 너무 클 때 재실행/실행 취소 성능을 향상시키는 방법.

Here은 작업 데모입니다.

참고 : 페이지 매김이 내 경우에 적합하지 않습니다. 스크롤에 데이터를로드하려고합니다.

더 나은 성능으로 다시 실행/실행 취소 기능을 수행하는 데 적합한 다른 앵글 플러그인이나 다른 방법을 제안하십시오.

Answer 1

요약하면, Memento Factory에서 상태 관리를 추가 할 수 있습니다.

필요한 코드는 모두 아래에 있지만 내 블로그에는 배경이 조금 더 있습니다 (AngularJS Memento Factory).

function MementoFactory(){ 
    return function() { 
    var memento = this; 
    // Private properties 
    var subjects = arguments; // We can track multiple objects or arrays 
    var stack = []; // Each call to "save" makes a copy of every subject on the stack 
    var currentIndex = 0; // The "current" position on the stack stack 
    // Begin by saving the current state 
    save(); 
    // Public properties 
    memento.timestamp = null; // The timestamp for the current stack 
    // Public methods 
    memento.save = save; 
    memento.canUndo = canUndo; 
    memento.undo = undo; 
    memento.canRedo = canRedo; 
    memento.redo = redo; 

    function save() { 
     var snapshot = { 
     timestamp: Date.now(), // The save time 
     subjects: [], // Contains each of the subjects 
     }; 
     for (var a = 0, al = subjects.length; a < al; a++) { 
     snapshot.subjects.push(angular.copy(subjects[a])); 
     } 
     if (stack[currentIndex] && angular.equals(stack[currentIndex].subjects, snapshot.subjects)) { 
     return; // Do nothing if the new snapshot is the same as the current snapshot 
     } 
     if (canRedo()) { 
     stack = stack.slice(0, currentIndex + 1); // Since we can "redo" we must overwrite that timeline (consider Back To The Future: Part II) 
     } 
     memento.timestamp = snapshot.timestamp; // Store the time 
     stack.push(snapshot); 
     currentIndex = stack.length - 1; 
    }; 
    function canUndo() { 
     return currentIndex > 0; 
    }; 
    function undo() { 
     if (canUndo()) { 
     restoreSnapshot(-1); 
     } 
    }; 
    function canRedo() { 
     return currentIndex < stack.length - 1; 
    }; 
    function redo() { 
     if (canRedo()) { 
     restoreSnapshot(+1); 
     } 
    }; 
    function restoreSnapshot(indexDiff) { 
     currentIndex += indexDiff; 
     var snapshot = stack[currentIndex]; 
     memento.timestamp = snapshot.timestamp; // Update the timestamp 
     for (var s = 0, sl = snapshot.subjects.length; s < sl; s++) { 
     if (snapshot.subjects[s] !== subjects[s]) { 
      angular.copy(snapshot.subjects[s], subjects[s]); 
     } 
     } 
    }; 
    }; 
}; 

angular 
    .module('app') 
    .factory('Memento', MementoFactory); 

당신이

ctrl.user = { name: 'David King', location: 'England' }; 
ctrl.tags = [ 'AngularJS', 'Angular', 'Firebase' ]; 
// Create a new Memento object 
var memento = new Memento(ctrl.user, ctrl.tags); 
// Expose the undo and redo methods 
ctrl.canUndo = memento.canUndo; 
ctrl.redo = memento.redo; 
ctrl.canRedo = memento.canRedo; 
ctrl.undo = memento.undo; 

추가를 추적 취소하고보기에 버튼을 다시 할 비 원시적 변수를 전달, 새로운 메멘토 (...) 객체를 생성

<button 
    type="button" 
    ng-click="ctrl.undo()" 
    ng-disabled="!ctrl.canUndo">Undo</button> 
<button 
    type="button" 
    ng-click="ctrl.redo()" 
    ng-disabled="!ctrl.canRedo">Redo</button> 

적절한 경우 Memento 객체를 저장하십시오.

<input 
    type="text" 
    ng-model="ctrl.user.name" 
    ng-change="ctrl.save()"> 
<input 
    type="text" 
    ng-model="ctrl.user.location" 
    ng-change="ctrl.save()"> 

... 그게 전부 야!