双击角度编辑带有对象数组的表格

Question

我有这样的对象数组：

$scope.rows = 
[{
    num1: 56,
    num2: 78,
    num3: 89
}, {
    num1: 56,
    num2: 78,
    num3: 89
}, {
    num1: 56,
    num2: 78,
    num3: 89
}, {
    num1: 56,
    num2: 78,
    num3: 89
}];

使用 ng-repeat 创建的表：

<div id="structure">
    <table border='1|1'>
        <tr ng-repeat="item in rows">
            <td>
                <span ng-hide="item.editing" ng-dblclick="editItem(item)">{{item.num1}}</span>
                <input ng-show="item.editing" ng-blur="doneEditing(item)" autofocus/>
            </td>
            <td>
                <span ng-hide="item.editing" ng-dblclick="editItem(item)">{{item.num2}}</span>
                <input ng-show="item.editing" ng-blur="doneEditing(item)" autofocus/>
            </td>
            <td>
                <span ng-hide="item.editing" ng-dblclick="editItem(item)">{{item.num3}}</span>
                <input ng-show="item.editing" ng-blur="doneEditing(item)" autofocus/>
            </td>
        </tr>
    </table>
</div>

编辑函数：

$scope.editItem = function (item) {
    item.editing = true;
};

$scope.doneEditing = function (item) {
    item.editing = false;
};

问题是每个对象中的所有键名都相同，如何双击更新表值？

Answer 1

您只需将 Angular's ng-model 指令与您的inputs 一起使用，这样它们就会更新相应的item，因此每个input 值都绑定到其对应的item 编号。

例如，在第一个列中，您可以这样定义它：

<input ng-show="item.editing" ng-blur="doneEditing(item)" ng-model="item.num1" autofocus/>

这应该是你的 HTML：

    <tr ng-repeat="item in rows">
      <td>
        <span ng-hide="item.editing" ng-dblclick="editItem(item)">{{item.num1}}</span>
        <input ng-show="item.editing" ng-blur="doneEditing(item)" ng-model="item.num1" autofocus/>
      </td>
      <td>
        <span ng-hide="item.editing" ng-dblclick="editItem(item)">{{item.num2}}</span>
        <input ng-show="item.editing" ng-blur="doneEditing(item)" ng-model="item.num2" autofocus/>
      </td>
      <td>
        <span ng-hide="item.editing" ng-dblclick="editItem(item)">{{item.num3}}</span>
        <input ng-show="item.editing" ng-blur="doneEditing(item)" ng-model="item.num3" autofocus/>
      </td>
    </tr>

演示：

function myCtrl($scope) {

  $scope.rows = [{
    num1: 56,
    num2: 78,
    num3: 89
  }, {
    num1: 56,
    num2: 78,
    num3: 89
  }, {
    num1: 56,
    num2: 78,
    num3: 89
  }, {
    num1: 56,
    num2: 78,
    num3: 89
  }];

  $scope.editItem = function(item) {
    item.editing = true;
  };

  $scope.doneEditing = function(item) {
    item.editing = false;
  };

}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<div ng-app>
  <div ng-controller="myCtrl">
    <div id="structure">
      <table border='1|1'>
        <tr ng-repeat="item in rows">
          <td>
            <span ng-hide="item.editing" ng-dblclick="editItem(item)">{{item.num1}}</span>
            <input ng-show="item.editing" ng-blur="doneEditing(item)" ng-model="item.num1" autofocus/>
          </td>
          <td>
            <span ng-hide="item.editing" ng-dblclick="editItem(item)">{{item.num2}}</span>
            <input ng-show="item.editing" ng-blur="doneEditing(item)" ng-model="item.num2" autofocus/>
          </td>
          <td>
            <span ng-hide="item.editing" ng-dblclick="editItem(item)">{{item.num3}}</span>
            <input ng-show="item.editing" ng-blur="doneEditing(item)" ng-model="item.num3" autofocus/>
          </td>
        </tr>
      </table>
    </div>
  </div>
</div>

---

编辑：

为了解决您在 cmets 中所说的问题，这是一个更新的 Demo sn-p，它只考虑影响点击的列而不是整行。

function myCtrl($scope) {
  
  $scope.editableColumn = 0;

  $scope.rows = [{
    num1: 56,
    num2: 78,
    num3: 89
  }, {
    num1: 56,
    num2: 78,
    num3: 89
  }, {
    num1: 56,
    num2: 78,
    num3: 89
  }, {
    num1: 56,
    num2: 78,
    num3: 89
  }];

  $scope.editItem = function(item, col) {
    item.editing = true;
    $scope.editableColumn = col;
  };

  $scope.doneEditing = function(item) {
    item.editing = false;
    $scope.editableColumn = 0;
  };

}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<div ng-app>
  <div ng-controller="myCtrl">
    <div id="structure">
      <table border='1|1'>
        <tr ng-repeat="item in rows">
          <td>
            <span ng-hide="item.editing" ng-dblclick="editItem(item, 1)">{{item.num1}}</span>
            <input ng-show="item.editing && editableColumn == 1" ng-blur="doneEditing(item)" ng-model="item.num1"/>
          </td>
          <td>
            <span ng-hide="item.editing" ng-dblclick="editItem(item, 2)">{{item.num2}}</span>
            <input ng-show="item.editing && editableColumn == 2" ng-blur="doneEditing(item)" ng-model="item.num2"/>
          </td>
          <td>
            <span ng-hide="item.editing" ng-dblclick="editItem(item, 3)">{{item.num3}}</span>
            <input ng-show="item.editing && editableColumn == 3" ng-blur="doneEditing(item)" ng-model="item.num3"/>
          </td>
        </tr>
      </table>
    </div>
  </div>
</div>

我刚刚在作用域中添加了一个editableColumn 变量，该变量将始终使用要编辑的列号进行更新。