Question

我想知道如何在AngularJS网格中添加一个特定列值作为文本框。

所以，我正在实现一个AngularJS网格，如下所示：

<div>
<table>
<tr>
    <th>
       <td>Customer Account Number</td>
       <td>Customer Name</td>
   </th>
</tr>
<tbody>
 <tr ng-repeat="item in data">
   <td>{{item.CustomerAccNumber}}</td>
   <td>{{item.CustomerName}}</td>
</tr>
</tbody>
</table>
<input type=button value="Add Row" ng-click="Add()"/>

因此，在方案2中会发生一些事情：

默认情况下，我收到的记录很少为＆＃34;客户帐号＆＃34;和＆＃34;客户名称＆＃34;。
但是有一个＆＃34;添加行＆＃34;我需要实现的同一页面上的按钮，它会向网格添加一个新行。
- 第一栏＆＃34;客户帐号＆＃34;是一个文本框，第二行是不可编辑的。
- 那么，只有在从按钮添加新行时，如何将文本框作为列放置？
让我们说在添加添加行之后，我的第一列将作为文本框出现，因此在textchange上的文本框中输入帐号后，它应该获取客户帐号并将其显示在同一行中。

有人可以帮我弄清楚如何将文本框放入网格中的某个特定列吗？

可以按照我实施网格的方式完成吗？

我不想使用nggrid。

Answer 1

我会做这样的事情：

首先，在您的控制器中，在Add()函数中，当您推送新行时，添加isEditable等字段，以便区分UI中新添加的行。 / p>

$scope.Add = function() {
    $scope.data.push({
        'CustomerAccNumber': 1,
        'CustomerName': '',
        'isEditable': true // field to identify new row
    })
}

然后在你的标记中，让flg可用，你可以使用ngIf，如下所示：

<tr ng-repeat="item in data">
   <td ng-if="!item.isEditable">{{item.CustomerAccNumber}}</td>
   <td ng-if="item.isEditable">
       <input type="text" ng-model="item.CustomerAccNumber">
   </td>
   <td>{{item.CustomerName}}</td>
</tr>

应获取CustomerAccount数字

就您的第三项而言，当用户点击开箱时，您可以使用ngBlur拨打电话：

1）在控制器中定义一个功能，以便在用户离开时调用。

  $scope.doSomethingWithAccNumber() {
        // $http call, etc
  }

2）更新文本框以使用ngBlur指令，该指令将在用户点击时触发。

   <td ng-if="item.isEditable">
       <input type="text"
              ng-model="item.CustomerAccNumber"
              ng-blur="doSomethingWithAccNumber()">
   </td>

如果您希望其他键触发此操作，您也可以使用ngKeydown。很好地概括了这一点的使用here。例如，您希望在输入中添加ng-keydown="$event.keyCode === 13 && doSomethingWithAccNumber()"以在Enter上触发。

如何在AngularJS网格中有条件地将列更改为文本框？

1 个答案: