Как сделать динамическую контентно-редактируемую таблицу, используя угловой JS?

0

Caveat: Я только начал с клиентских сценариев, и Angular JS - это первое, что я изучаю, и теперь я чувствую, что должен был начать с javascript. PS: Я не хочу использовать сторонние библиотеки. Я хочу научиться кодировать.

Во всяком случае, у меня есть динамическая таблица, которую я хочу сделать редактируемой, используя content-editable = true атрибут HTML.

Проблема: как получить отредактированные данные? всякий раз, когда я нажимаю кнопку "Отправить" и передаю этот объект функции check(). Я не содержал отредактированных значений. есть ли способ передать только отредактированное значение, если оно грязное. Он имеет разбиение на страницы так, что если g на следующую страницу, отредактированные значения исчезнут. Я знаю, что я даю уникальный идентификатор каждому элементу td с индексом $ Index, объединенным с ним. Но я не знаю, как мне идти дальше.

Любая помощь или руководство будут оценены. Контроллеры и другие определены в моем маршруте.

<div>
<form ng-submit="check(this)">
    <table class="table table-striped table-hover">
        <tbody>
            <tr ng-repeat="data in currentItems">
                <td contenteditable="true >{{data.EmpNo}}</td>
                <td contenteditable="true">{{data.isActive}}</td>
                <td contenteditable="true">{{data.balance}}</td>
                <td contenteditable="true">{{data.age}}</td>
                <td contenteditable="true">{{data.eyeColor}}</td>
                <td contenteditable="true">{{data.fname}}</td>
            </tr>
        </tbody>
        <tfoot>
            <td>
                <div class="pagination pull-right">
                    <li ng-class="{'disabled': previousPage}">
                        <a ng-click="previousPage()" >Previous</a>
                    </li>   
                    <li ng-repeat="page in pageLengthArray track by $index">
                        <a ng-click="pagination($index)">{{$index+1}} </a>
                    </li>
                    <li  disabled="disabled">
                        <a ng-click="nextPage()" ng-class="{'disabled':nextPage}>Next </a>
                    </li>
                </div>
            </td>
        </tfoot>
    </table>
    <input type="submit" value="Submit">
</form>


     $scope.currentPage=0;
     $scope.pageSize=10;
     $scope.currentItems;
     $scope.tableData;
   $http.get('../json/generated.json').then(function(response){
      $scope.tableData=response.data;
      $scope.pageLength=Math.ceil($scope.tableData.length/$scope.pageSize);
           $scope.currentItems=$scope.tableData.slice($scope.currentPage,$scope.pageSize);
      $scope.pageLengthArray= new Array($scope.pageLength);
    });

        $scope.pagination=function(currentPage){   $scope.currentItems=$scope.tableData.slice($scope.pageSize*currentPage,$scope.pageSize*currentPage+$scope.pageSize);
          $scope.currentPage=currentPage;
        }   
        $scope.nextPage=function nextPage(argument) {
              $scope.currentPage++;  $scope.currentItems=$scope.tableData.slice(($scope.pageSize*$scope.currentPage),($scope.pageSize*($scope.currentPage)+$scope.pageSize));
            }
        $scope.previousPage=function previousPage(argument) {
          $scope.currentPage--;
          $scope.currentItems=$scope.tableData.slice(($scope.pageSize*$scope.currentPage),($scope.pageSize*($scope.currentPage)+$scope.pageSize));
        }
  • 0
    Итак, вы хотите, чтобы ваша функция check принимала только те объекты, которые были отредактированы?
  • 0
    Вы можете использовать $dirty чтобы проверить, какие данные изменены.
Показать ещё 2 комментария
Теги:
html-table

2 ответа

0
Лучший ответ

В обычном случае вы не можете получить модель изменения для contenteditabe потому что для изменения модели используется ngModel.

Но мы можем создать директиву о том, что мы обновили значение модели.

Живой пример на jsfiddle.

angular.module('ExampleApp', [])
  .controller('ExampleController', function($scope, $timeout) {
    $scope.data = {
      EmpNo: "123"
    };
  })
  .directive('contenteditable', function($timeout) {
    return {
      restrict: "A",
      priority: 1000,
      scope: {
        ngModel: "="
      },
      link: function(scope, element) {
        element.html(scope.ngModel);
        element.on('focus blur keyup paste input', function() {
          scope.ngModel = element.text();
          scope.$apply();
          return element;
        });
      }
    };
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ExampleApp">
  <div ng-controller="ExampleController">

    <table>
      <tr>
        <td ng-model="data.EmpNo" contenteditable="true"></td>
      </tr>
    </table>
    <pre>{{data|json}}</pre>
  </div>
</div>
Поделиться
  • 0
    Спасибо, это было отличное решение, однако я надеялся, что вы сможете ответить на несколько вопросов для лучшего понимания моих концепций. 1) Почему мы устанавливаем приоритеты в директиве, когда моя функция post-link не выполняет манипуляцию DOM? Тоже 1000, и я не хочу, чтобы он запускался перед директивой (я не знаю)? 2) почему мы наконец возвращаем элемент и почему element.html (scope.ngModel)?
  • 0
    Другое дело, что я пересчитываю currentItems каждый раз, когда нажимаю, чтобы перейти на следующую страницу (наивная логика). Теперь, когда я что-то редактирую, currentItems обновляется из-за ng-модели. Однако, поскольку я пересчитываю currentItems каждый раз, когда нажимаю при переходе на следующую страницу и возвращаюсь, я не вижу обновленного значения, потому что ранее вычисленные currentItems ушел но как-то неестественно я делаю. Я не понимаю эту концепцию. Как это происходит? если бы currentItems были одинаковыми все время, я получаю его, но я пересчитываю, он не должен показывать мне обновленные значения. Пожалуйста, потерпите мое непонимание.
Показать ещё 4 комментария
0

Я бы сохранил любой объект, который модифицируется в отдельном массиве с помощью директивы ng-keyup. Когда форма отправлена, у вас будет массив только элементов, которые были изменены. У вас могут быть проблемы с UX, если ваша разбивка на страницы выполняется сервером, как при смене страницы и возврате, она покажет ваши старые данные, но, надеюсь, это поможет.

$scope.check = function () {
    // check modifiedItems
    console.log(modifiedItems);
};

// store modified objects in a seperate array
var modifiedItems = [];

$scope.modifyItem = function (data) {

    // check if data has already been modified and splice it first
    for(var i = 0, j = modifiedItems.length; i < j; i++) {
        var currentItem = modifiedItems[i];

        if (currentItem.id === data.id) {
            modifiedItems.splice(i, 1);
            break;
        }
    }

    // add to modified
    modifiedItems.push(data);
    console.log('modifiedItems: ', modifiedItems);
};

HTML

<form ng-submit="check()">
    <table class="table table-striped table-hover">
        <tbody>
            <tr ng-repeat="data in currentItems">
                <td ng-repeat="(key, value) in data" contenteditable="true"
                    ng-keyup="modifyItem(data)">
                    {{data[key]}}
                </td>
            </tr>
        </tbody>
        <tfoot>
    </table>
    <input type="submit" value="Submit">
</form>
Поделиться
  • 0
    Я ценю ваше время и знания, это было довольно неплохое временное решение @SuperVeetz. Однако, как указывалось, я столкнулся с проблемами нумерации страниц, поэтому я подумал, что лучше было бы воспользоваться решением, предоставленным ^ StepanKasyanenko, хотя на первый взгляд это сложно, но помогает с лучшее понимание концепции.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню