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

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

0 голосов
/ 10 сентября 2018 

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 = [] ;. Любое предложение о том, как я могу добиться этого.

1 Ответ

0 голосов
/ 10 сентября 2018

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

  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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...