如何在AngularJS网格中有条件地将列更改为文本框?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在AngularJS网格中有条件地将列更改为文本框?相关的知识,希望对你有一定的参考价值。
我想知道如何在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。
答案
我会做这样的事情:
首先,在您的控制器中,在Add()
函数中,当您推送新行时,添加一个字段(如isEditable
)以允许您区分UI中新添加的行。
$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网格中有条件地将列更改为文本框?的主要内容,如果未能解决你的问题,请参考以下文章