如何使用角度JS制作动态内容可编辑表

How to make dynamic content-editable table using angular JS?

本文关键字：编辑 动态 何使用 JS      更新时间：2023-09-26

警告：我刚刚开始使用客户端脚本，Angular JS是我正在学习的第一件事，现在我觉得我应该从javascript开始。PS：我不想使用任何第三方库。我想学习编码。

无论如何，我有动态表，我想使用 HTML 的内容可编辑=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));
        }

在通常情况下，您无法获得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>

我会使用 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>
相关文章：