如何使用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指令將要修改的所有對象存儲在單獨的數組中。 提交表單后，將只有一個已修改元素的數組。 如果您的分頁是由服務器完成的，則可能會遇到一些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>