Javascript 编辑一行时禁用其他行-编辑表的单个行

在下面的html代码中，当一行处于编辑模式（单击此行上的编辑按钮）时，其余行上的编辑按钮将被禁用。当一行处于编辑模式时，数据将显示在文本输入字段中

            <table class="table">
            <thead>
                <tr>
                    <th class="col-sm-4">Branch Name</th>
                    <th class="col-sm-3">Branch ID</th>
                    <th class="col-sm-3">Foo</th>
                    <th class="col-sm-1">Doo</th>
                    <th class="col-sm-3"></th>
                </tr>
            </thead>
        <tr ng-repeat="branch in branches">
            <td id="name"         ng-bind="branch.name"></td>
            <td id="ID"    ng-bind="branch.id"></td>
            <td id="foo" data-editable>
                <span ng-hide="editMode" ng-bind="branch.foo"></span>
                <input class="form-control" data-ng-show="editMode" id="foo" data-ng-model="branch.foo"/>
            </td>
            <td id="doo" data-editable>
                <span ng-hide="editMode" ng-bind="branch.doo"></span>
                <input class="form-control" data-ng-show="editMode" id="do" ng-model="branch.doo"/>
            </td>
            <td>
                <button type="submit" class="btn btn-default" data-ng-disabled="editing" data-ng-show="!editMode" data-ng-click="editMode = true; editEntry(branch)">Edit</button>
                <span ng-show="editMode" class="pull-right">
                    <button type="submit" class="btn btn-default" data-ng-disabled="!enableToSave(branch)" data-ng-click="editMode = false; saveEntry(branch)">Save</button>
                    <button type="submit" class="btn btn-default" ng-show="editMode" data-ng-click="editMode = false; cancelEditing(branch)">Cancel</button>
                </span>
            </td>
        </tr>
            </table>

---

然而，这种方法似乎并不可靠。有更好的方法吗？

尝试使用ng重复实例，而不是单一模型

像这样

<button type="submit" class="btn btn-default" data-ng-disabled="branch.isDisable" data-ng-click="saveEntry(branch)">Save</button>
<button type="submit" class="btn btn-default" ng-show="branch.isDisable" data-ng-click="cancelEditing(branch)">Cancel</button>

$scope.editEntry = function(branch) {
    branch.isDisable=false;
    $scope.branches.forEach(function(x){
       if(x.id!=branch.id)
          x.isDisable=true;
   })
}

---

您需要对表格进行参数检查：

<tr ng-repeat="branch in branches" ng-disabled="editingOther(branch.id)">
...
    <button type="submit" class="btn btn-default" data-ng-disabled="editing" data-ng-click="editEntry(branch)">Edit</button>

---

我在

tr

元素上放置了一个

ng disabled

，作为示例，您需要为其他行构建自己所需的逻辑。

感谢您的建议此方法接近于我原来的方法。它工作得很好。谢谢。

<tr ng-repeat="branch in branches" ng-disabled="editingOther(branch.id)">
...
    <button type="submit" class="btn btn-default" data-ng-disabled="editing" data-ng-click="editEntry(branch)">Edit</button>

$scope.editing = false;
$scope.editing_entry = null;
$scope.editEntry = function(branch) {
    $scope.editing = true;
    $scope.editing_entry = branch.id;
}
$scope.editingOther = function(branch_id) {
    return $scope.editing && $scope.editing_entry != branch_id;
}