Angular 内联编辑 table 单例

Question

我正在尝试为 table（类似于 angular-xeditable）创建内联编辑，但我只想一次只允许编辑一行 table。目前，您可以将任意数量的行置于编辑模式。

选项

在编辑模式下保留行列表，一旦选择要编辑的新行，循环遍历列表并强制退出编辑模式，将请求行置于编辑模式并将其添加到列表中。这实际上将允许列表中最多有 1 行，导致一次 editable 一行。但我没有展示如何让行退出编辑模式。
有一个退出编辑模式的取消按钮。因此，也许可以使用 jquery（或 angular.element）来获取所有取消按钮的列表并实用地单击它们 - 再次，在编辑模式下强制退出行，但这可能会减慢速度 table 因为它将在甚至不处于编辑模式的行上单击取消。

<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

您可以像这样使用 $index 变量（已内置在 ng-repeat 操作中）将 ng-repeat 操作的索引传递给您的 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>

请注意，我还给按钮取了一个 class 名称！！

然后在你的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变量是当前点击的编辑按钮的索引。

这是一个笨蛋：http://plnkr.co/edit/N9EKErLJkFR5TwEzImNP?p=preview

Answer 2

通过将 editContact 和 reset 函数更新为以下内容，我能够获得所需的结果：

$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

我仍然看到开关之间有轻微的闪烁，所以如果有人有建议让它更顺畅，我将不胜感激。

如果我在几天内没有看到达到预期结果的其他答案，我会将此答案标记为已接受。感谢所有提供帮助的人！

Angular 内联编辑 table 单例

Angular inline edit table singleton

javascript

css

html-table

inline-editing

angularjs