Угловое связывание между переменными

У меня есть список пользователей, которые я извлекаю из своего сервиса. Когда я выбираю любого пользователя, я могу видеть и редактировать информацию (электронную почту, роли и т.д.). Проблема в том, что я не хочу, чтобы эти изменения влияли на пользовательские данные в списке, я хочу обновлять данные только после сохранения (нажав кнопку).

Теперь я использую две переменные:

$scope.selected - выбранный пользователь

$scope.editable - переменная для хранения данных, которые я редактирую

И я обмениваюсь данными следующим образом:

$scope.initEditable = function () 
{
    $scope.editable = {};
    $.extend($scope.editable, $scope.selected);
}

Похоже на ужасное решение. Каков правильный способ сделать это?

Ответы

Ответ 1

На самом деле, это Angular -way для решения этой проблемы, вы на правильном пути. В таких сценариях, как ваш, обычно:

  • Копирование элемента при выборе (начало редактирования) - это то, что вы делаете с editable
  • Использовать двустороннюю привязку данных, изменяющую копию (или оригинальный элемент)
  • После завершения редактирования мы можем распространять изменения с копии на оригинал

Хорошие вещи об этом шаблоне - это то, что мы можем легко:

  • Предлагаем функцию "отменить", где пользователи могут возвращать свои изменения.
  • Уметь сравнивать копию и оригинал и разделы диска пользовательского интерфейса на основе этого сравнения (например, мы могли бы отключить кнопку "Сохранить", если не было никаких изменений).

Итак, я не думаю, что этот подход ужасен. Единственное, что я мог бы сделать, это использовать angular angular.copy метод вместо $.extend.