how to enable textbox under ng-repeat

Question

I have a functionality in which I take list of clients from user, first I store this list in the List Object in angularjs controller and then send it to the server. The problem is, When I take input from user, I have given some text boxes and after user fills up all the data, user clicks on ADD button next to the text boxes, Then the record just added gets appended to the blank row which is designed to take input. I have made a provision that the records are appended are "Read Only" or say "Disabled" and A UPDATE button next to it. What I want is how do I write the code which will "Enable" a particular row whose update button is clicked. I have used angular js for it I am sharing some code snippet and one representative image for better understanding, Please help..!! Thank you JSP page

<tbody id="insertionRow" ng-init="edit=true">
        <tr>    
            <th>#</th>
            <th class="required">Name</th>
            <th>Email</th>
            <th>Phone No</th>
            <th>Add</th>
            <th>Delete</th>
    </tr>
    <tr data-ng-repeat="c in ctrl.client.clientOwnerVOList">
        <td>{{$index + 1}}</td>
        <td class="col-lg-3"><input type="Text" class="form-control"
            data-ng-model="c.clientOwnerName"
            id="clientOwnerName{{$index + 1}}" data-ng-disabled="isDisable(c)" id="name">
        </td>

        <td class="col-lg-4"><input type="Email" class="form-control"
            data-ng-model="c.clientOwnerEmail"
            id="clientOwnerEmail{{$index + 1}}" data-ng-disabled="isDisable(c)"></td>

        <td class="col-lg-3"><input type="Text" class="form-control" 
            data-ng-model="c.clientOwnerPhone" data-ng-disabled="isDisable(c)"
            id="clientOwnerPhone{{$index + 1}}"></td>

        <td>
            <button id="add{{$index + 1}}" type="button"
                 data-ng-if="ctrl.client.clientOwnerVOList.indexOf(c)==0" data-ng-click="insert(c)"
                class="btn btn-sm btn-default">
                <i class="fa fa-plus fa-lg"></i>
            </button>
            <button id="edit{{$index + 1}}" type="button"
                data-ng-if="ctrl.client.clientOwnerVOList.indexOf(c)>0"
                class="btn btn-sm btn-default">
                <i class="fa fa-edit fa-lg"></i>
            </button >
            <button id="refresh{{$index + 1}}"  type="button" style="display:none"
                class="btn btn-sm btn-default">
                <i class="fa fa-refresh fa-lg"></i>
            </button>
        </td>

        <td><button type="button" data-ng-if="ctrl.client.clientOwnerVOList.indexOf(c)>0"
                ng-click="remove(c);" class="btn btn-sm btn-default">
                <i class="fa fa-trash fa-lg "></i>
            </button>
            <button type="button" data-ng-if="ctrl.client.clientOwnerVOList.indexOf(c)==0"
                class="btn btn-sm btn-default">
                <i class="fa fa-trash fa-lg "></i>
            </button>
        </td>

    </tr>
</tbody>

Controller Code

$scope.insert=function(clientOwner){
    self.client.clientOwnerVOList.push({clientOwnerName:clientOwner.clientOwnerName,clientOwnerEmail:clientOwner.clientOwnerEmail,clientOwnerPhone:clientOwner.clientOwnerPhone});

                      clientOwner.clientOwnerName="";
                      clientOwner.clientOwnerEmail="";
                      clientOwner.clientOwnerPhone="";
    }

   $scope.isDisable = function(clientOwner){
              //alert("in new isDisable");
              if(self.client.clientOwnerVOList.indexOf(clientOwner)==0){
                  return false;
                }
              else{
                  return true;
              }

          }

Answer 1

It's good to use a variable(may be array/object) in ng-disabled condition as it is easy to toggle the variable. The array variable is used to map the edit condition of each row.

Suppose, I have an array items like below:

$scope.items = [{id: 101, name: 'item1'}, {id: 102, name: 'item2'}];

Template

<tr ng-repeat="item in items" >
    <td>
      <input type="text" ng-if="isEditItem[$index]" ng-model="item.id" />
      <span ng-if="!isEditItem[$index]">{{item.id}}</span>
    </td>
    <td>
      <input type="text" ng-if="isEditItem[$index]" ng-model="item.name"/>
      <span ng-if="!isEditItem[$index]">{{item.name}}</span>
    </td>
    <td>
      <button ng-if="!isEditItem[$index]" ng-click="editItem($index)">Edit Item</button>
      <button ng-if="isEditItem[$index]" ng-click="saveItem($index)">Save Item</button> 
    </td>           
</tr>

In controller

$scope.isEditItem = [];

$scope.addItem = function() {
    $scope.items.unshift({});
    $scope.isEditItem[0] = true;
}

$scope.editItem = function($index) {
    $scope.isEditItem[$index] = true;
}

$scope.saveItem = function($index) {
    $scope.isEditItem[$index] = false;
}

So, in the above example, isEditItem array contains the edit condition of items. When user click edit button for a item, make true of the index in isEditItem. Make it false, when user click save button.

I just wanted you to give an example how it can be done. I think, you can update your code by looking this example.

Plunker of the above example

Answer 2

What I usually do is have a variable selectedItem in controller. When you click edit you set the item c in your ng-repeat as the selected item.

Then in your ng-if and ng-disabled in view use comparison c==ctrl.selectedItem

Controller

self.selectedItem = data[0];
self.setSelected(item){
   self.selectedItem = item
}

View

<button edit ng-click="ctrl.setSelected(item)">
<input data-ng-model="c.clientOwnerName" data-ng-disabled="!c==ctrl.selectedItem">

Answer 3

You can do something like this to the edit button in you html

    <button id="edit{{$index + 1}}" type="button"
        data-ng-if="ctrl.client.clientOwnerVOList.indexOf(c)>0"
        class="btn btn-sm btn-default" data-ng-click="editRow(c)">
        <i class="fa fa-edit fa-lg"></i>
    </button >

And something like this to your editable elements

<input type="Text" class="form-control" 
        data-ng-model="c.clientOwnerPhone" data-ng-disabled="!c.enable"
        id="clientOwnerPhone{{$index + 1}}">

And in controller

$scope.edit = function(row){

    row.enable = true;

}

And whenever updated data is submited make sure you pass the entire row as argument and in controller

//assuming the submit function to be like this

$scope.submit = function(row){
    row.enable = false;
}