Geek Answers Handbook

How can I prevent Angular from re-sorting my list during editing?

I created a small application using Angular to control Todolists. There are many todo in each list. Each todo has the attributes name, value1 and value2.

Each list should be sorted automatically using Angular, so I used 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>

In my controller, I defined an order filter as follows:

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

This works well until I tried to make every line editable. To do this, I added an extra <div>with input elements for editing the values ​​inside each <li>, and also added ng-hide="todo.editing"and ng-show="todo.editing"to turn on / off the editing mode, simply by setting todo.editing=trueor 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, :

: Angular todo todo.editing=true?

+4
2

, . , .

+1

, 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>

, ( , ™).

0

More articles:


All Articles