Отображать отредактированные данные, а также предыдущие данные в одной строке таблицы в angularjs 1x

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.newField = [];
  $scope.editing = false;

  $scope.data = [{
    "supplier_name": "ABC",
    "first_name": "example",
    "last_name": "test",
    "email": "example@abc.com",
    "telephone_number": "919-575-5506"
  }, {
    "supplier_name": "XYZ",
    "first_name": "test",
    "last_name": "example",
    "email": "example@abc.com",
    "telephone_number": "919-575-5506"
  }]
  $scope.editData = function(field) {
    $scope.editing = $scope.data.indexOf(field);
    $scope.newField[$scope.editing] = angular.copy(field);
    console.log($scope.data.indexOf(field));
  }

  $scope.saveData = function(index) {
    $scope.data[$scope.editing] = $scope.newField;
  };

  $scope.cancel = function(index) {
    $scope.data[index] = $scope.newField[index];
    $scope.editing = false;
  };

});
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>

<body>
  <div ng-app="myApp" ng-controller="myCtrl">
    <table id="supplierTable">
      <thead>
        <tr>
          <th id="supplier_name">Supplier Name</th>
          <th id="first_name">First Name</th>
          <th id="last_name"> Last Name</th>
          <th id="email">Email</th>
          <th id="telephone_number">phone</th>
          <th>Action
          </th>
        </tr>
      </thead>
      <tbody>
        <tr name="supplierTable" data-ng-repeat="supplier in data">
          <td>
            <div ng-hide="editMode">{{supplier.supplier_name}}</div>
            <div ng-show="editMode"><input type="text" name="supplier_name" ng-model="supplier.supplier_name" readonly />
            </div>
          </td>
          <td>
            <div ng-hide="editMode">{{supplier.first_name}}</div>
            <div ng-show="editMode"><input type="text" name="first_name" ng-model="supplier.first_name" required />
            </div>
          </td>
          <td>
            <div ng-hide="editMode">{{supplier.last_name}}</div>
            <div ng-show="editMode"><input type="text" name="last_name" ng-model="supplier.last_name" required />
            </div>
          </td>
          <td>
            <div ng-hide="editMode">{{supplier.email}}</div>
            <div ng-show="editMode"><input type="email" name="email" size="30" ng-model="supplier.email" required />
            </div>
          </td>
          <td>
            <div ng-hide="editMode">{{supplier.telephone_number}}</div>
            <div ng-show="editMode"><input type="tel" ng-model="supplier.telephone_number" required pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" />
            </div>
          </td>
          <td>
            <button ng-hide="editMode" data-ng-click="editMode = true; editData(supplier)">Edit</button>
            <button ng-disabled="supplierTable.$invalid" ng-show="editMode" data-ng-click="editMode = false;">
                        Save</button>
            <button ng-show="editMode" data-ng-click="editMode = false; cancel($index)">Cancel</button>
          </td>
        </tr>
  </div>
  </tbody>
  </table>
  </div>
</body>

</html>

Я пытаюсь отобразить результат сохраненных и отредактированных данных в одной строке. Я добился функциональности встроенного редактирования и сохранения. Теперь я пытаюсь связать мою предыдущую запись и новые данные, хранящиеся в $ scope.newField = []; и отобразить это в той же строке после нажатия кнопки сохранения. Я пробовал такой подход, но моя проблема в том, что изначально $ scope.newField = [] пусто, и как только я внесу изменения, у меня будут данные в $ scope.newField = [] ;. любые предложения о том, как я могу этого добиться.

вы хотите показать старые значения под новыми значениями?

Azad 10.09.2018 08:32
0
1
92
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

В вашем коде есть проблемы. Например:

  1. Переменная $scope.editing является логической, но вы пишете $scope.editing = $scope.data.indexOf(field)

  2. У вас нигде не запускается функция saveData

Я поменял твой код. Проверить это можно только на поле First Name.

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  previousDataBuffer = {}
  editingIndex = null;

  $scope.data = [{
    "supplier_name": "ABC",
    "first_name": "example",
    "last_name": "test",
    "email": "example@abc.com",
    "telephone_number": "919-575-5506"
  }, {
    "supplier_name": "XYZ",
    "first_name": "test",
    "last_name": "example",
    "email": "example@abc.com",
    "telephone_number": "919-575-5506"
  }];
   
  $scope.previousData = new Array($scope.data.length);

  $scope.editData = function(index) {
    previousDataBuffer = angular.copy($scope.data[index]);
    editingIndex = index;
  }

  $scope.saveData = function(index) {
    $scope.previousData[index] = previousDataBuffer;
    editingIndex = null;
  };

  $scope.cancel = function(index) {
    $scope.data[index] = angular.copy(previousDataBuffer);
    editingIndex = null;
  };

  $scope.isEditingRow = function(index) {
    return index === editingIndex;
  };
});
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>

<body>
  <div ng-app="myApp" ng-controller="myCtrl">
    <table id="supplierTable">
      <thead>
        <tr>
          <th id="supplier_name">Supplier Name</th>
          <th id="first_name">First Name</th>
          <th id="last_name"> Last Name</th>
          <th id="email">Email</th>
          <th id="telephone_number">phone</th>
          <th>Action
          </th>
        </tr>
      </thead>
      <tbody>
        <tr name="supplierTable" data-ng-repeat="supplier in data">
          <td>
            <div ng-hide="isEditingRow($index)">{{supplier.supplier_name}}</div>
            <div ng-show="isEditingRow($index)"><input type="text" name="supplier_name" ng-model="supplier.supplier_name" readonly />
            </div>
          </td>
          <td>
            <div ng-hide="isEditingRow($index)">
<span ng-if="previousData[$index].first_name && previousData[$index].first_name != supplier.first_name">{{previousData[$index].first_name}} / </span>
{{supplier.first_name}}</div>
            <div ng-show="isEditingRow($index)"><input type="text" name="first_name" ng-model="supplier.first_name" required />
            </div>
          </td>
          <td>
            <div ng-hide="isEditingRow($index)">{{supplier.last_name}}</div>
            <div ng-show="isEditingRow($index)"><input type="text" name="last_name" ng-model="supplier.last_name" required />
            </div>
          </td>
          <td>
            <div ng-hide="isEditingRow($index)">{{supplier.email}}</div>
            <div ng-show="isEditingRow($index)"><input type="email" name="email" size="30" ng-model="supplier.email" required />
            </div>
          </td>
          <td>
            <div ng-hide="isEditingRow($index)">{{supplier.telephone_number}}</div>
            <div ng-show="isEditingRow($index)"><input type="tel" ng-model="supplier.telephone_number" required pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" />
            </div>
          </td>
          <td>
            <button ng-hide="isEditingRow($index)" data-ng-click="editData($index)">Edit</button>
            <button ng-disabled="supplierTable.$invalid" ng-show="isEditingRow($index)" data-ng-click="saveData($index)">
                        Save</button>
            <button ng-show="isEditingRow($index)" data-ng-click="cancel($index)">Cancel</button>
          </td>
        </tr>
  </div>
  </tbody>
  </table>
  </div>
</body>

</html>

он работал нормально, однако есть небольшое изменение в отмене для работы, поэтому я сделал это изменение, чтобы отобразить предыдущее значение. Теперь, когда я нажимаю кнопку редактирования, отображается редактирование для всех строк, хотя я передаю индекс конкретной строки.

Chandra 12.09.2018 22:46

Если у нас есть запись «обработано»: «да» (Нет или В процессе) в data []. можем ли мы скрыть кнопку редактирования на основании этого значения в базе данных? а также удалить предыдущий ввод данных (отображать только новые данные), если состояние обработки - да?

Chandra 14.09.2018 07:25

Будет ли хорошей идеей иметь поле идентификатора в данных [{....}] и связывать новые и старые данные на основе этого идентификатора, а не полагаться на индекс, потому что мы храним данные в двух разных массивах, и в конечном итоге они пойдут в две разные таблицы базы данных. пожалуйста, извините меня, если я задаю какой-нибудь тупой вопрос, поскольку я новичок в этой области.

Chandra 14.09.2018 08:07

Чандра, проектирование базы данных - сложная вещь, и вам нужно знать все технические требования, чтобы создать правильную архитектуру. Вы можете записать все в одну коллекцию [ { data: { key: value}, logs: [ { key: value} ]} ], но это не очень хорошая идея, потому что в какой-то момент вам понадобятся чистые данные без логов. И коллекция станет слишком большой, чтобы ею управлять. Данные и журналы всегда хранятся отдельно.

Oleg Dikusar 14.09.2018 08:27

я пытаюсь отобразить значения, которые находятся в данных [{....}], поступающих из базы данных, с идентификатором, статусом обработки и другим полем. теперь, когда пользователь вносит изменения, новые значения переходят в другую временную таблицу, а идентификатор останется таким же, с новыми значениями и изменениями статуса в процессе, поэтому на этом этапе редактирование не допускается. как только его обработанное состояние изменится на да, у меня будет только одна запись отображается пользователю, и новые данные сохраняются в основной таблице в базе данных, а временная таблица (которая является previousData [{...}] rightNow) снова пуста.

Chandra 14.09.2018 09:23

Чандра, если вам нужно сохранить предыдущие значения и отобразить их после перезагрузки страницы - вам нужно добавить новые поля в БД, самый простой способ - продублировать текущие поля, то есть first_name, prev_first_name, last_name, prev_last_name и т. д. НО, обычно синхронизируйте на Back End с отдельной таблицей. Поэтому, когда вы сохраняете данные, серверная часть получает предыдущие данные из таблицы БД, а затем сохраняет их в другую таблицу, а затем сохраняет новые данные в основную таблицу.

Oleg Dikusar 14.09.2018 09:58

Другие вопросы по теме