如何防止Angular在編輯時重新整理列表？

Question

我創建了一個使用Angular管理Todolist的應用程序。每個清單都有一些待辦事項。每個待辦事項都有屬性名稱，值1和值2。

每個列表應當由角自動排序，所以我用ng-repeat="todo in selectedList.todos | orderBy: todoOrderFilter"：

<ul class="list-group"> 
    <li class="list-group-item" ng-repeat="todo in selectedList.todos | orderBy: todoOrderFilter"> 

     <div> 
     <span>{{todo.name}} (Value1: {{todo.value1}}, Value2 {{todo.value2}})</span> 
     <button type="button" class="btn btn-warning btn-xs" ng-click="editTodo(todo)"><i class="icon-trash"></i> Edit</button> 
     <button type="button" class="btn btn-danger btn-xs floatright" ng-click="deleteTodo(todo)"><i class="icon-trash"></i> Delete</button> 
     </div> 

    </li> 
    </ul> 

在我的控制，我定義我的訂單過濾器是這樣的：

$scope.todoOrderFilter = function (todo) { 
    return todo.value1 * todo.value2; 
}; 

這種運作良好，到目前爲止，直到我試圖使每一行都可編輯。爲了做到這一點，我增加了一個額外的<div>與輸入元素來編輯每個<li>內的值，並且還添加了ng-hide="todo.editing"和ng-show="todo.editing"以便能夠通過簡單地設置todo.editing=true或false來打開/關閉編輯模式;

HTML全文如下：

<ul class="list-group"> 
    <li class="list-group-item" ng-repeat="todo in selectedList.todos | orderBy: todoOrderFilter"> 

     <div ng-hide="todo.editing"> 
     <span>{{todo.name}} (Value1: {{todo.value1}}, Value2 {{todo.value2}})</span> 
     <button type="button" class="btn btn-warning btn-xs" ng-click="editTodo(todo)"><i class="icon-trash"></i> Edit</button> 
     <button type="button" class="btn btn-danger btn-xs floatright" ng-click="deleteTodo(todo)"><i class="icon-trash"></i> Delete</button> 
     </div> 

     <div ng-show="todo.editing"> 
     <input id="todoname" ng-model="todo.name" ng-enter="updateTodo(todo)" type="text" class="form-control marginBottom" placeholder="Todo speichern" aria-describedby="basic-addon2"></input> 
     Value1: <input ng-model="todo.value1" ng-enter="updateTodo(todo)" type="text" class="form-control marginBottom" placeholder="Value1" aria-describedby="basic-addon2"></input> 
     Value2: <input ng-model="todo.value2" ng-enter="updateTodo(todo)" type="text" class="form-control marginBottom" placeholder="Value2" aria-describedby="basic-addon2"></input> 
     <button type="button" class="btn btn-default" ng-click="updateTodo(todo)">Save</button> 
     <button type="button" class="btn btn-danger" ng-click="cancelUpdateTodo(todo)">Cancel</button> 
     </div> 

    </li> 
    </ul> 

編輯按鈕處理程序：

$scope.editTodo = function(todo) { 
    todo.editing = true; 
}; 

這有點兒工作，但同時我編輯輸入域值1或參數值2我的排序功能，自動觸發這將導致<li>上下跳動的元素非常糟糕。

所以我基本上想要的是我的自動排序過濾器被禁用，而todo.editing=true。

到目前爲止，我發現等等這些類似的問題，但他們並沒有真正的幫助：

• Disabling orderBy in AngularJS while editing the list（不知道如何到那裏申請的答案，我的代碼）
• https://stackoverflow.com/questions/30845516/stop-ng-repeat-auto-sorting-your-objects-while-editing-text-box-and-checkbox-in（無答案）

---

問：如何防止角訴諸而01的待辦事項列表？

Answer 1

解決方案是編輯對象的副本，而不是直接編輯它。然後，在用戶完成編輯時用原始對象替換原始對象。

Answer 2

我堅信使用已由Angular團隊爲我們編寫的代碼，並構建它。因此，我認爲這是裝飾內置orderBy過濾器接受第四個參數（ignore）的完美場景。

我沒有非常徹底地測試過自己，但它應該做的伎倆;

app.config(function ($provide) { 
    $provide.decorator('orderByFilter', function ($delegate) { 
    // Store the last ordered state. 
    var previousState; 

    return function (arr, predicate, reverse, ignore) { 
     // If ignore evaluates to a truthy value, return the previous state. 
     if (!!ignore) { 
     return previousState || arr; 
     } 

     // Apply the regular orderBy filter. 
     var order = $delegate.apply(null, arguments); 

     // Overwrite the previous state with the most recent order state. 
     previousState = order; 

     // Return the latest order state. 
     return order; 
    } 
    }); 
}); 

用法：

<div ng-repeat="d in data | orderBy:predicate:reverse:ignore"> 

<!-- in your case --> 
<div ng-repeat="todo in selectedList.todos | orderBy:todoOrderFilter:false:todo.editing> 

我希望這一切纔有意義（甚至只是工作™）。