CODEWITHSUNDEEP
javascriptjqueryangularjs
Deepak
Deepak

Reputation: 376

How can I Enable/Disable table row contents - Angularjs

My HTML I'm having controls inside table as :-

<tr ng-repeat="r in MyTblDataList">
     <td>
       <input id="chkBoxClass" type="checkbox" class="checkbox checkbox-inline" ng-model="r.BoardID" />
     </td>
     <td>
        <input id="txtClass" type="text" class="form-control" ng-model="r.BoardName" value="{{r.BoardName}}" disabled />
     </td>
     <td>
        <input id="btnEditClass" type="button" class="btn-xs btn-info" value="Edit" ng-click="EditUpdateChange('btnEditClass','btnUpdateClass','txtClass',true)" />
        <input id="btnUpdateClass" type="button" class="btn-xs btn-success" value="{{btnUpdate}}" ng-click="UpdateClass('btnEditClass','btnUpdateClass','txtClass', r.BoardID )" hidden />
        <input id="btnDeleteClass" type="button" class="btn-xs btn-danger" value="Delete" />
      </td>

I'm using my function to show/Hide and Disable the textbox:-

$scope.EditUpdateChange = function (btnEditID, btnUpdateID, txtEditID, value) {
            if (value) {
                $('#' + btnEditID).hide();
                $('#' + btnUpdateID).show();
            }
            else {
                $('#' + btnEditID).show();
                $('#' + btnUpdateID).hide();
            }
            //$('#' + txtEditID).prop('disabled', !value);
            $(this).closest('tr').disabled = !value;
        }

My problem is even though I click on Edit button in second or third row. My first row always go enable and disable. Can't figure out what I'm doing wrong. Also is there a better way of doing this using Angular?

Upvotes: 0

Views: 4572

Answers (1)

Wesley Shann
Wesley Shann

Reputation: 63

For hiding and showing elements in angular, I think you should use the built-in directives ng-show, ng-hide or ng-if.

As the name suggests, ng-show and ng-hide show or hide the element based on the expression provided. Note that they are still in the DOM, they just aren't visible right now. ng-if insert or remove the element from the DOM, instead of showing or hiding.

For disabling the row, you can use the ng-disabled directive.

So, in your code, you could use:

<tr ng-disabled="!r.BoardID"> <!-- Didn't test, but I think this will disable the whole row, including the checkbox, so you may want to move the ng-disabled to the input itself -->
  <input id="btnEditClass" type="button" class="btn-xs btn-info" value="Edit" ng-click="EditUpdateChange()" ng-hide="r.BoardID" />
  <input id="btnUpdateClass" type="button" class="btn-xs btn-success" value="{{btnUpdate}}" ng-click="UpdateClass()" ng-show="r.BoardID" />
</tr>

In general, I think you don't really need to use JQuery when developing an Angular application.

Edit 1

The status you want then:

  1. At first, edit and delete button are available and the textbox is disabled
  2. When edit button is clicked:
    • Enable the textbox
    • Show the update button
    • Hide the edit button

Alright, so the code for this would be like that:

Row in html

<tr ng-repeat="r in MyTblDataList">
  <td>
     <input id="chkBoxClass" type="checkbox" class="checkbox checkbox-inline" ng-model="r.BoardID" />
  </td>
  <td>
     <input ng-disabled="!r.isEditing" id="txtClass" type="text" class="form-control" ng-model="r.BoardName" value="{{r.BoardName}}"/>
     <!-- Will disable on null, false and undefined -->
 </td>
 <td>
    <input ng-click="onEdit($index)" ng-if="!r.isEditing" id="btnEditClass" type="button" class="btn-xs btn-info" value="Edit"/> 
    <!-- $index is a variable provided by ng-repeat -->
    <!-- Similar as above, but will be inserted in the DOM instead of disabled. -->

    <input ng-click="onUpdate($index)" ng-if="r.isEditing" id="btnUpdateClass" type="button" class="btn-xs btn-success" value="{{btnUpdate}}"/>

    <!-- 
      If you want to use show/hide, you would use:
        Edit btn: ng-hide="r.isEditing"
        Update btn: nh-show="r.isEditing"
    -->
    <input id="btnDeleteClass" type="button" class="btn-xs btn-danger" value="Delete" />
 </td>
</tr>

variable and functions needed in JS

function onEdit(index){
  MyTblDataList[index].isEditing = true;
}

function onUpdate(index){
  // You may want to do something with the new data, maybe some validation or so
  MyTblDataList[index].isEditing = false;
}

When updating the data in the controller, the change should be reflected in the view. To ilustrate this, I have created a Plunker with your code. In this plunker:

  • I use vm as syntax (you can search about this, but it is a better aproach to link the data to the controller through var vm = this instead of accessing the scope directly)
  • Made one field editable at one time
  • If you leave without clicking the Update button, the changes are discarted.

I have choosed to use the ng-if instead of ng-show and ng-hide to select what to show because as ng-if remove the content from the HTML, it remove the watchers manteined by Angular. Note that if there is an excesive amount of watchers, performance is affected.

Upvotes: 2

Related Questions