如何使用angular JS製作動態內容可編輯表格？

Question

警告：我剛開始使用客戶端腳本，Angular JS是我正在學習的第一個東西，現在我覺得我應該已經開始使用JavaScript了。 PS：我不想使用任何第三方庫。我想學習編碼。

無論如何，我有動態表，我想使用HTML的content-editable = true屬性進行編輯。

問題：如何獲取編輯的數據？每當我點擊提交併將這個對象傳遞給check（）函數。我不包含編輯的值。有沒有一種可能的方式來傳遞只有編輯過的值，如果它很髒。它具有分頁功能，因此如果g到下一頁，編輯後的值將消失。我知道我已經給每個td元素賦予了唯一的Id，並且與$ 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)); 
     } 

Answer 1

在通常情況下，你不能得到改變模型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>

Answer 2

我將存儲被使用ng-keyup指令在一個單獨的陣列修改的任何對象。當表單被提交時，您將只有一組已修改的元素。如果您的分頁由服務器完成，您可能會遇到一些用戶體驗問題，因爲當您更改頁面並返回時，它會顯示您的舊數據，但希望這會有所幫助。

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