我使用 Angular 创建了一个小应用程序来管理 Todolists。每个列表都有许多待办事项。每个 todo 都有属性 name、value1 和 value2。
每个列表都应该由 Angular 自动排序，所以我使用了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;
};
这有点工作，但是当我编辑 value1 或 value2 的输入字段时，我的排序功能会自动触发，这会导致<li>元素上下跳跃，这真的很糟糕。
所以我基本上想要的是我的自动排序过滤器在todo.editing=true.
到目前为止，我在 SO 上发现了这些类似的问题，但它们并没有真正的帮助：
- 在编辑列表时禁用 AngularJS 中的 orderBy（不明白如何将答案应用到我的代码中）
- https://stackoverflow.com/questions/30845516/stop-ng-repeat-auto-sorting-your-objects-while-editing-text-box-and-checkbox-in（无答案）
问题：如何防止 Angular 使用待办事项列表 while todo.editing=true？