如何使用angular JS制作动态内容可编辑表？

Question

Caveat : I've just started with client side scripting and Angular JS is the first thing I'm learning and now I feel I should've started with javascript. PS : I don't wanna use any third party libraries. I wanna learn to code.

Anyway,I have dynamic table which I want to make editable using content-editable=true attribute of HTML.

Problem : How to I get the edited data? whenever I click on submit and pass the this object to the check() function. I doesn't contain edited values. is there a possible way to pass only edited value if it's dirty. It has pagination so If g to the next page the edited values are gone. I know I've give unique Id to every td element with $Index concatenated to it. But I don't know how should I proceed.

Any help or guidance will be appreciated. Controllers and others are defined in my route.

<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));
        } 

Answer 1

In the usual case, you can not get a change model for contenteditabe because to change the model used ngModel .

But we can create a directive that we have updated the value of the model.

Live example on 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> 

Answer 2

I would store any object that gets modified in a seperate array using the ng-keyup directive. When the form is submitted, you will have an array of only elements which have been modified. You may have some UX issues if your pagination is done by server as when you change page and come back, it will show your old data, but hopefully this helps.

$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>