角度内联编辑表单身

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

可以使用$index变量（已内置到NG-重复操作）的NG-重复操作的指标传递给你的editContact功能是这样的：

<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