我想知道如何在 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 中,事情发生了:
- 默认情况下,我得到的“客户帐号”和“客户姓名”等记录很少。
- 但是在我需要实现的同一页面上有一个“添加行”按钮,它可以向网格添加一个新行。
- 第一列“客户账号”是一个文本框,第二行是不可编辑的。
- 那么,如何仅在从按钮添加新行时将文本框作为列放置?
- 假设在添加添加行后,我的第一列作为文本框出现,因此在 textchange 的文本框中输入帐号后,它应该获取客户帐号并将其显示在同一行中。
谁能帮我弄清楚如何将文本框放入网格中的特定列中?
可以按照我实现网格的方式来完成吗?
我不想使用 nggrid。
最佳答案
我会做这样的事情:
首先,在您的 Controller 中,在您的 Add()
中函数,当你推送一个新行时,添加一个字段,如isEditable
允许您区分 UI 中新添加的行。
$scope.Add = function() {
$scope.data.push({
'CustomerAccNumber': 1,
'CustomerName': '',
'isEditable': true // field to identify new row
})
}
然后在您的标记中,有了该标志,您可以利用 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) 在您的 Controller 中定义一个函数,以便在用户离开框时调用。
$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
.
关于javascript - 如何有条件地将列更改为 AngularJS 网格中的文本框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47913996/