установить ng-readonly = "true" в строке таблицы после сохранения

Question

Я использую angular для заполнения и редактирования данных в таблице, это работает как ожидалось, однако я хотел бы иметь возможность пометить строку как 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;
};

Единственный способ, которым я смог сделатьэто покачтобы установить переменную isReadOnly напрямую, используя ng-click = "isReadOnly = false / true", однако это означает, что я не могу вызвать контроллер с помощью ng-click на той же кнопке, поэтому мне придется использовать ng-submit, а для этого потребуетсяудаляя таблицу и вместо этого используя форму, которая выглядит так, как будто это таблица, я не хочу этого делать.

Кто-нибудь может посоветовать, как мне этого добиться, используя angular?

Заранее спасибо.

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