disable textbox in angular js which is under ng-repeat

Question

I 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' '[email protected]'(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="";
    }

Yeah but I am unable to resolve the condition, as I mainly work on server side,I am not that familiar with html and the DOM and all.. — Vish
– Vish, Commented Jun 2, 2016 at 6:32

U.P · Accepted Answer · 2016-06-02 07:21:46Z

1

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
}

edited Jun 2, 2016 at 7:21

answered Jun 1, 2016 at 13:54

U.P

7,4527 gold badges43 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vish Over a year ago

I don't just want to disable row which contain 'bobby', rather I want to disable all the sub sequent rows after the blank one can you suggest the logic for that.?

Vish Over a year ago

Alright just one thing to ask is what if I want to make it enable on click of edit... where should I write code and what it must be..? I mean You can see in image I uploaded above, edit button is provided with the each row, I want to enable that particular row whose edit button is clicked

Mike Feltman · Accepted Answer · 2016-06-01 13:54:26Z

0

Use the ng-disabled directive on the items you want to conditionally enable/disable.

ng-disabled="expression"

https://docs.angularjs.org/api/ng/directive/ngDisabled

answered Jun 1, 2016 at 13:54

Mike Feltman

5,1721 gold badge19 silver badges39 bronze badges

Collectives™ on Stack Overflow

disable textbox in angular js which is under ng-repeat

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related