Wie macht man dynamische Inhalt editierbare Tabelle mit eckigen JS?

Question

Vorbehalt: Ich habe gerade mit Client Side Scripting begonnen und Angular JS ist das erste, was ich lerne und jetzt habe ich das Gefühl, ich hätte mit Javascript beginnen sollen. PS: Ich möchte keine Bibliotheken von Drittanbietern verwenden. Ich möchte lernen zu programmieren.

Wie auch immer, ich habe dynamische Tabelle, die ich mit editable editable = True-Attribut von HTML machen möchte.

Problem: Wie bekomme ich die bearbeiteten Daten? Immer wenn ich auf submit klicke und dieses Objekt an die check() Funktion übergebe. Ich habe keine bearbeiteten Werte. Gibt es eine Möglichkeit, nur editierten Wert übergeben, wenn es schmutzig ist. Es hat Seitennummerierung, wenn auf der nächsten Seite die bearbeiteten Werte weg sind. Ich weiß, dass ich jedem td-Element mit $ -Index eine eindeutige ID gegeben habe. Aber ich weiß nicht, wie ich vorgehen soll.

Jede Hilfe oder Anleitung wird geschätzt. Controller und andere sind in meiner Route definiert.

<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

Im üblichen Fall, man kann nicht eine Änderung Modell für contenteditabe bekommen, weil das Modell ngModel zu ändern.

Aber wir können eine Direktive erstellen, dass wir den Wert des Modells aktualisiert haben.

Live Beispiel auf 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

Ich würde speichern alle Gegenstände, die in einem separaten Array mit der Richtlinie ng-keyup modifiziert wird. Wenn das Formular gesendet wird, haben Sie ein Array von nur Elementen, die geändert wurden. Sie können UX-Probleme haben, wenn Ihre Paginierung vom Server ausgeführt wird, wie wenn Sie die Seite wechseln und zurückkommen, wird es Ihre alten Daten zeigen, aber hoffentlich hilft das.

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