Vish Vish - 6 months ago 17
jQuery Question

disable textbox in angular js which is under ng-repeat

enter image description hereI am working on angularjs and came across one serious issue, consider that I am adding a company details through html form and then I have made a provision that User can add more than one owners for that company[because a company can have several owners in the form of partners]. Now I have given the text boxes to fill up company owners information and along with that one "add" button is provided, On clicking add button, one object gets added to the companyOwnerList and then angularjs internally appends a new row with the data in the companyOwnerList (as I have used ng-repeat).
now the problem is I want to disable all the rows which got added by users and provide them with the option "edit". These row are not getting disabled at all. I am unable to find a logic to do it in angularjs.[in jQuery I could have done that comfortably but unable to implement it in angularjs].
I want to disable the row which contains 'bobby' 'bobby@abc.com'(please refer the image)
Please Help
Thank you..
I am providing some code snippet so that the problem will be crystal clear
Jsp Page code as follows:

<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}}" id="name">
</td>

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

<td class="col-lg-3"><input type="Text" class="form-control"
data-ng-model="c.clientOwnerPhone"
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>


And the controller code is:

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

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

Answer

You can try this

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

in controller

$scope.IsDisabled(c){
  return c.clientOwnerName == "Bobby"; //or other conditions
}

UPDATE

you can try the following. You can keep a flag and set it once there is a value "Bobby" then you can use the $index to make sure all subsequent rows are disabled.

Html

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

Controller

$scope.disabledIndex = 1000; //some large number

$scope.IsDisabled(c, i){

  if( i > $scope.disabledIndex) return true;

  if(c.clientOwnerName == "Bobby")
    $scope.disabledIndex = i;

  return c.clientOwnerName == "Bobby"; //or other conditions
}