保存后在表行上设置ng-readonly =“ true”

Question

我正在使用angular来填充和编辑表中的数据，这按预期工作，但是我希望能够在单击“ Edit”时将行标记为ng-readonly false（这也很好），然后在单击“更新”（这是我无法弄清的部分）后再次将行设置为ng-readonly true。

我尝试使用$ scope.isReadOnly = true从角度控制器进行设置，但这没有任何效果。

该表将具有一个“编辑”按钮，单击该按钮可使行可编辑（readonly = false），并使用ng-show隐藏该按钮，然后显示“更新”按钮，并且在单击时应提交ng-model = “ webUser”并将isReadOnly设置为true，这将使该行不可编辑，并将“更新”按钮替换为“编辑”按钮。

这是桌子

<div class="container text-center">
    <h2>Web Users</h2>
    <table class="table">
        <tr>
            <th>User</th>
            <th>Status</th>
            <th>Email</th>
        </tr>
        <tr ng-repeat="webUser in webUsers track by webUser.userId">
            <td><input ng-readonly="true" type="text" ng-model="webUser.userId" /></td>
            <td><input ng-readonly="isReadOnly" type="text" ng-model="webUser.statusValue" /></td>
            <td><input ng-readonly="isReadOnly" type="email" ng-model="webUser.emailAddress" /></td>
            <td><button ng-hide="!isReadOnly" ng-disabled="!isReadOnly" class="btn btn-primary" ng-click="isReadOnly = false">Edit</button></td>
            <td><button type="submit" ng-hide="isReadOnly" ng-readonly="true" class="btn btn-success" ng-click="UpdateWebUser(webUser)">Update</button></td>
        </tr>
    </table>

控制器中的AngularJS代码为：

    $scope.UpdateWebUser = function (webUser) {
    $scope.isReadOnly = true;
};

到目前为止，我唯一能够做到这一点的方法就是直接使用ng-click =“ isReadOnly = false / true”设置isReadOnly变量，但这意味着我无法使用ng-click调用控制器相同的按钮，因此我将不得不使用ng-submit，这将需要删除表格，而要使用一种看起来像是表格的表格，这不是我想要的方式。

任何人都可以建议我可以使用角度实现此目标的方法吗？

谢谢。

Answer 1

如果我很了解您的要求，则需要一个额外的变量来每个用户分隔编辑和非编辑模式。实现此目的的一种方法是在每个用户对象中添加一个布尔值edit并切换此值以使字段为只读：

<div class="container text-center">
<h2>Web Users</h2>
<table class="table">
  <tr>
    <th>User</th>
    <th>Status</th>
    <th>Email</th>
  </tr>
  <tr ng-repeat="webUser in webUsers track by webUser.userId">
    <td><input ng-readonly="true" type="text" ng-model="webUser.userId" /></td>
    <td><input ng-readonly="!webUser.edit" type="text" ng-model="webUser.statusValue" /></td>
    <td><input ng-readonly="!webUser.edit" type="email" ng-model="webUser.emailAddress" /></td>
    <td><button ng-hide="webUser.edit" class="btn btn-primary" ng-click="webUser.edit = true">Edit</button></td>
    <td><button type="submit" ng-hide="!webUser.edit" class="btn btn-success" ng-click="UpdateWebUser(webUser)">Update</button></td>
  </tr>
</table>

控制器无变化：

$scope.UpdateWebUser = function(webUser) {
    console.log(webUser);
    webUser.edit = false;
  };

检查工作示例：DEMO