I want to know how to add one particular column value as textbox in an AngularJS grid.
So, I am implementing an AngularJS grid as below:
<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()"/>
So, in scenario 2 things happen:
Can someone help me figure out how to put the textbox into one particular column in grid?
Can it be done the way I have implemented the grid?
I don't want to use nggrid.
I would do something like this:
First, in your Controller, in your Add()
function, when you push a new row, add a field such as isEditable
to allow you to differentiate between a newly added row in the UI.
$scope.Add = function() {
$scope.data.push({
'CustomerAccNumber': 1,
'CustomerName': '',
'isEditable': true // field to identify new row
})
}
Then in your markup, having that flg available, you can leverage ngIf , like so:
<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>
it should fetch CustomerAccount number
As far as your third item, you can use ngBlur to make a call when the user clicks out of the box:
1) Define a function in your controller to call when the user leaves the box.
$scope.doSomethingWithAccNumber() {
// $http call, etc
}
2) Update your textbox to use the ngBlur directive that will trigger when the user clicks out.
<td ng-if="item.isEditable">
<input type="text"
ng-model="item.CustomerAccNumber"
ng-blur="doSomethingWithAccNumber()">
</td>
If you want other keys to trigger this, you can use ngKeydown as well. Use of this is outlined well here . For example, you would want to add ng-keydown="$event.keyCode === 13 && doSomethingWithAccNumber()"
to your input to trigger on Enter
.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.