如何防止Angular在编辑时对列表进行重新排序?

蒂莫

我使用Angular创建了一个小应用程序来管理Todolists。每个列表都有许多待办事项。每个待办事项都有名称,值1和值2。

每个列表应按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=truefalse;

完整的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上发现了类似的问题,但它们并没有真正帮助:


问题:如何防止Angular同时使用待办事项列表todo.editing=true

蒂莫

解决方案是编辑对象的副本,而不是直接编辑它。然后,当用户完成编辑后,用副本替换原始对象。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何重新排序列表?

在编辑具有以前成功上传的图像的记录时,如何不必在编辑时重新上传?

如何在编辑时清除UITextView?

在编译时对整数常量的元组进行排序

在编译时如何枚举,排序等类?

允许UITableView重新排序,但不能在编辑模式下删除,并且无论如何都允许滑动以删除

想要在编辑时自动对Google表格电子表格进行排序,但希望按日期排序

Excel使用列表对列进行重新排序

Angular:(ngFor)删除项目时如何防止重新加载?

仅在编辑特定文件时使Flask重新启动

如何在编辑EditText字段时重新定位光标,该字段的格式类似于美国货币-Android

在编辑模式下使用自定义滑动操作时,如何防止单元缩进?

下拉列表在编辑行Laravel时显示选定的值

如何使用laravel在编辑中显示排序列表?

如何根据另一个活动的可排序列表对列表进行重新排序?

如何使Sublime Text重新加载正在编辑的文件?

如何防止TableView在javaFX 8中进行TableColumn重新排序?

如何对下拉列表进行重新排序(jquery)

自动重新加载jqgrid并在编辑时停止

如何根据内容在Python中对列表进行重新排序

如何防止HAML对class属性中的单词进行重新排序?

Python在排序后对列表列表进行重新排序

IntelliJ IDEA和Play框架集成-如何在编辑时进行编译?

在列表中编辑和重新排序元组

Excel 365:如何防止Excel在编辑时锁定文件

如何对列表进行排序,同时重新排序第二个列表?

angular2-multiselect:在编辑模块时在列表中显示选定的值

值是列表时如何对python字典进行排序?

Reactjs - 如何防止在编辑表单期间分配 null