Угловая рядный редактировать таблицы одноточечно

Question

Я пытаюсь создать встроенное редактирование для таблицы (аналогично angular-xeditable), но я хочу, чтобы только одна строка только редактируемой в то время. В настоящее время вы можете использовать любое количество строк в режиме редактирования.

Опция

1. Держите список строк в режиме редактирования, и как только будет выбрана новая строка для редактирования, цикл по списку и принудительно выйти из режима редактирования, поставить запрос строка в режиме редактирования и добавьте его в список. Это, по существу, позволит не более 1 строки быть в списке, что приведет к тому, что одна строка будет доступна для редактирования одновременно. Но я не показываю, как нужно переводить строки из режима редактирования.

2. Существует кнопка отмены, который выходит из режима редактирования. Поэтому, возможно, используйте jquery (или angular.element), чтобы получить список всех кнопок отмены и прагматически щелкнуть по ним - снова, принудительно выходя из строк в режиме редактирования, но это может замедлить работу для большой таблицы, так как она будет отжимать отменить на строк, которые даже не находятся в режиме редактирования.

<table class="table table-striped"> 
<thead> 
    <tr> 
    <th id="th-name">Name</th> 
    <th id="th-age">Age</th> 
    <th id="th-actions">Actions</th> 
    </tr> 
</thead> 
<tr ng-repeat="contact in model.contacts"> 
    <td> 
    <span ng-show="edit != true">{{contact.name}}</span> 
    <input ng-show="edit" type="text" ng-model="model.selected.name" class="form-control" placeholder="Name"> 
    </td> 
    <td> 
    <span ng-show="edit != true">{{contact.age}}</span> 
    <input ng-show="edit" type="text" ng-model="model.selected.age" class="form-control" placeholder="Name"></td> 
    <td> 
    <button ng-show="edit != true" id="table-edit" ng-click="edit = true; editContact(contact)" uib-tooltip="Delete" tooltip-trigger="mouseenter" tooltip-placement="bottom"><i class="fa fa-fw fa-pencil"></i></button> 
    <button ng-show="edit" id="table-save" ng-click="edit = false; saveContact($index)" uib-tooltip="Delete" tooltip-trigger="mouseenter" tooltip-placement="bottom"><i class="fa fa-fw fa-floppy-o"></i></button> 
    <button ng-show="edit" id="table-cancel" ng-click="edit = false; reset()" uib-tooltip="Delete" tooltip-trigger="mouseenter" tooltip-placement="bottom"><i class="fa fa-fw fa-trash"></i></button> 
    </td> 
</tr> 
</table> 

Вот plunker демо (позволяет все строки в режиме редактирования): Plnkr Demo `

Вот рабочий пример того, что я хотел достичь, но с помощью шаблонов , Он вызывает getTemplate слишком много раз для моей симпатии (называет его каждый раз, когда выполняется дайджест - нажатие кнопок, ввод текста, отображение всплывающей подсказки). Working Demo (Using templates)

Answer 1

я смог получить желаемый результат путем обновления editContact и сброса функции на следующее:

$scope.editContact = function(contact, event) { 
    // Nothing first time, but will have an element second time 
    $timeout(function() { 
    // Click the element and remove the class since it is not in edit mode anymore 
    angular.element('.row-edit-mode').triggerHandler('click'); 
    angular.element('.row-edit-mode').removeClass('row-edit-mode'); 

    // If it is not a button, then it is the fa-icon, so get its parent, which is a button 
    var eventElement = angular.element(event.target).is('button') ? event.target : event.target.parentNode; 
    // Find it's sibling with given id, and add a class to it 
    angular.element(eventElement).siblings("#table-cancel").addClass('row-edit-mode') 

    $scope.model.selected = angular.copy(contact); 
    }); 
}; 

$scope.reset = function() { 
    // Remove class on cancel 
    angular.element('.row-edit-mode').removeClass('row-edit-mode'); 
    $scope.model.selected = {}; 
}; 

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

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

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

Answer 2

Вы можете передать индекс нг-повтора операции вашей editContact функции, как это с помощью $index переменной (уже встроен в нг-повторить операцию):

<button class="edit-btn" ng-show="edit != true" id="table-edit" ng-click="edit = true; editContact(contact, $index);" uib-tooltip="Delete" tooltip-trigger="mouseenter" tooltip-placement="bottom"><i class="fa fa-fw fa-pencil"></i></button> 

Обратите внимание, что я также дал кнопку название класса!

Затем в файле app.js вы можете установить отображение других кнопок на none, когда одна кнопка запускается для редактирования. Затем, когда редактирования сохраняются, установить дисплей на блок:

var eles = document.getElementsByClassName('edit-btn'); 

$scope.editContact = function (contact, ind) { 

    $scope.model.selected = angular.copy(contact); 

    //remove display of other buttons 
    for(var i = 0; i < eles.length; i++){ 
     if(i != ind){ 
     eles[i].style.display = "none"; 
     } 
    } 

}; 

$scope.saveContact = function (idx) { 
    console.log("Saving contact"); 
    $scope.model.contacts[idx] = angular.copy($scope.model.selected); 

    //redo display of all buttons 
    for(var i = 0; i < eles.length; i++){ 
     eles[i].style.display = "block"; 
    } 

    $scope.reset(); 
}; 

Вы можете увидеть, что внутри кнопок editContact, переменная ind является индексом текущей кнопки редактирования, который щелкнул.

Вот Plunker: http://plnkr.co/edit/N9EKErLJkFR5TwEzImNP?p=preview