AngularJS 动态可编辑 Table 指令

Question

我的目标是创建一个完全动态的 editable table 指令，它只接受一个 json 对象并输出 editable html table。这是我目前所拥有的一个 plunker：

        ////////////////////////////////////
        // save
        ////////////////////////////////////
        $scope.save = function (ind) {

          $scope.headers.forEach(function(entry) {
              $scope.data[ind][entry] = 0; //I know this shouldn't be 0, but i just dont know how to get at the value of the input text box
          });



          $scope.showing = false;
        };

一切正常，除了保存。我只是不知道如何更新指令控制器中的 JSON 对象。而且我不能在我的文本框上放置一个 ng-model，因为它会覆盖从 json.

设置的值

Answer 1

可以在 "edition mode text boxes" 上添加 ng-model 指令，但是 "edition mode text boxes" 应该绑定行对象的副本而不是原始对象，稍后，在保存操作时用编辑后的副本替换原始对象

        ////////////////////////////////////
        // showEdit
        ////////////////////////////////////
        $scope.showEdit = function (ind) {

          // ...

          $scope.edit = angular.copy($scope.data[ind]);

          // ...

        };


        ////////////////////////////////////
        // save
        ////////////////////////////////////
        $scope.save = function (ind) {

          $scope.data[ind] = $scope.edit;

          // ...
        };

笨蛋：http://plnkr.co/edit/DlLnvE?p=preview

AngularJS 动态可编辑 Table 指令

AngularJS Dynamic Editable Table Directive

json

directive

angularjs