Angular JS - Редактирование содержимого Редактирование содержимого

Ответ 1

Вы должны поместить форму внутри каждого node и использовать ng-show и ng-hide для включения и отключения редактирования, соответственно. Что-то вроде этого:

<li>
  <span ng-hide="editing" ng-click="editing = true">{{bday.name}} | {{bday.date}}</span>
  <form ng-show="editing" ng-submit="editing = false">
    <label>Name:</label>
    <input type="text" ng-model="bday.name" placeholder="Name" ng-required/>
    <label>Date:</label>
    <input type="date" ng-model="bday.date" placeholder="Date" ng-required/>
    <br/>
    <button class="btn" type="submit">Save</button>
   </form>
 </li>

Ключевыми моментами здесь являются:

• Я изменил элементы управления ng-model на локальную область
• Добавлен ng-show в form, поэтому мы можем показать его при редактировании
• Добавлен span с ng-hide, чтобы скрыть содержимое при редактировании
• Добавлен ng-click, который может быть в любом другом элементе, который переключает editing в true
• Изменен ng-submit для переключения editing в false

Вот ваш обновленный Plunker.

Ответ 2

Я искал встроенное решение для редактирования, и я нашел плункер, который казался многообещающим, но это не сработало для меня из коробки. После некоторых возиться с кодом я получил его работу. Престижность тому человеку, который сделал первоначальное усилие, чтобы закодировать этот кусок.

Пример доступен здесь http://plnkr.co/edit/EsW7mV?p=preview

Вот код:

app.controller('MainCtrl', function($scope) {

  $scope.updateTodo = function(indx) {
    console.log(indx);
  };

  $scope.cancelEdit = function(value) {
    console.log('Canceled editing', value);
  };

  $scope.todos = [
    {id:123, title: 'Lord of the things'},
    {id:321, title: 'Hoovering heights'},
    {id:231, title: 'Watership brown'}
  ];
});

// On esc event
app.directive('onEsc', function() {
  return function(scope, elm, attr) {
    elm.bind('keydown', function(e) {
      if (e.keyCode === 27) {
        scope.$apply(attr.onEsc);
      }
    });
  };
});

// On enter event
app.directive('onEnter', function() {
  return function(scope, elm, attr) {
    elm.bind('keypress', function(e) {
      if (e.keyCode === 13) {
        scope.$apply(attr.onEnter);
      }
    });
  };
});

// Inline edit directive
app.directive('inlineEdit', function($timeout) {
  return {
    scope: {
      model: '=inlineEdit',
      handleSave: '&onSave',
      handleCancel: '&onCancel'
    },
    link: function(scope, elm, attr) {
      var previousValue;

      scope.edit = function() {
        scope.editMode = true;
        previousValue = scope.model;

        $timeout(function() {
          elm.find('input')[0].focus();
        }, 0, false);
      };
      scope.save = function() {
        scope.editMode = false;
        scope.handleSave({value: scope.model});
      };
      scope.cancel = function() {
        scope.editMode = false;
        scope.model = previousValue;
        scope.handleCancel({value: scope.model});
      };
    },
    templateUrl: 'inline-edit.html'
  };
});

Шаблон директивы:

<div>
  <input type="text" on-enter="save()" on-esc="cancel()" ng-model="model" ng-show="editMode">
  <button ng-click="cancel()" ng-show="editMode">cancel</button>
  <button ng-click="save()" ng-show="editMode">save</button>
  <span ng-mouseenter="showEdit = true" ng-mouseleave="showEdit = false">
    <span ng-hide="editMode" ng-click="edit()">{{model}}</span>
    <a ng-show="showEdit" ng-click="edit()">edit</a>
  </span>
</div>

Чтобы использовать его, просто добавьте воду:

<div ng-repeat="todo in todos" 
     inline-edit="todo.title" 
     on-save="updateTodo($index)" 
     on-cancel="cancelEdit(todo.title)"></div>

UPDATE:

Другим вариантом является использование готового Xeditable для AngularJS:

http://vitalets.github.io/angular-xeditable/

Ответ 3

Я изменил ваш плункер, чтобы заставить его работать через angular-xeditable:

http://plnkr.co/edit/xUDrOS?p=preview

Это обычное решение для встроенного редактирования - вы создаете гиперссылки с директивой editable-text который переключается в тег <input type="text">:

<a href="#" editable-text="bday.name" ng-click="myform.$show()" e-placeholder="Name">
    {{bday.name || 'empty'}}
</a>

В качестве даты я использовал директиву editable-date, которая переключается в html5 <input type="date">.

Ответ 4

Поскольку это общая часть функциональности, неплохо написать директиву для этого. Фактически, кто-то уже сделал это и открыл его. Я использовал editablespan библиотеку в одном из моих проектов, и она отлично работала, очень рекомендуется.