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>

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

2 个答案: