Question

在下面的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>

控制机制是＆＃34; editMode＆＃34; .Javascript / AngulaJS代码如下所示：

$scope.editing = false;

$scope.editEntry = function(branch) {
    if ($scope.editing !== false) {
        ...
    } else {
        $scope.editing = true;
        ....
    }
}

$scope.saveEntry = function(branch){
   ...
   $scope.editing = false;
}

$scope.cancelEditing = function(branch){
    if ($scope.editing !== false) {
        $scope.editing = false;
        ...
    }
}

$scope.enableToSave = function(branch){
   ...
}

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

Answer 1

尝试使用ng-repeat实例而不是单个模型

喜欢这个

<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;
   })
}

Answer 2

您需要对桌子进行参数检查：

<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>

然后在Angular

$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;
}

我在ng-disabled元素上放了tr作为示例，您需要为其他行构建自己想要的逻辑。

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

2 个答案: