How to conditionally change column to textbox in AngularJS grid?

Question

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:

1. By default I am getting few records as "Customer Account Number" and "Customer Name".
2. But there is an "Add Row" button on the same page I need to implement which adds a new row to the grid.
   • The first column "Customer Account Number" is a text box and second row is noneditable.
   • So, how to place textbox as a column only when adding a new row from button?
3. Let's say after adding add row my first column is coming as text box, so after entering the account number in the textbox on textchange it should fetch the customer account number and display it in the same row.

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.

Answer 1

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.