0

I am using x-editable to edit the table. It is activating entire table cells and rows to edit. I need to edit only clicked row alone. The Code I have used to edit the table. How to make the particular row as editable using x-editable. Inside the span tag I have used ng-click is to show the form tableform.$show() ng-change event is used to set the color of edited cell. I added the code below

Controller Code:

    $scope.saveTable = function ()
        {
            debugger;
                   for (var i = 0; i < $scope.Roles.length; i++) {
                    debugger;
                    var id = $scope.Roles[i]._id;
                    var rolename = $scope.Roles.RoleName;
                    var isactive = $scope.Roles.IsActive;
                    var description = $scope.Roles.Description;
                    $http.put('/Roleupdate/' + id + '/' + rolename + '/' + isactive + '/' + description).then(function (response) {
                        console.log(response);
                        refresh();
                    })
                }
                     };

//cell color change
    debugger;
    $scope.removeHighlight = function () {
        $(event.currentTarget).closest('form').find("td.highlighted").removeClass("highlighted");
    }
    $scope.applyHighlight = function ($data) 
        {
        var dataSpan = $(event.currentTarget).closest('td');
        if (!dataSpan.hasClass("highlighted")) {
            $(dataSpan).addClass("highlighted");
        }
    }


Html Code: 

<form editable-form name="tableform" oncancel="cancel()" onaftersave="saveTable()">
              <div class="panel-body scrollbar">
           <table class="table table-striped table-bordered table-list">
                  <tbody>

           <tr dir-paginate="Role in Roles| itemsPerPage:8 | filter:Role1 | orderBy:orderByField:reverseSort " ng-class-odd="'odd'">
       <td>
       <span e-ng-change="applyHighlight($data)" editable-text="Role.Name" ng-model="Role.Name"
                                                                            ng-click="tableform.$show()">
                                                                            {{ Role.Name || 'empty' }}

        </span>
        </td>
        <td>
        <div>
         <span e-ng-change="applyHighlight($data)" editable-text="Role.Description" ng-model="Role.Description"
                                                                                  ng-click="tableform.$show()">
                                                                                {{ Role.Description || 'empty' }}
                                                                            </span>
        </div>
        </td>
        <td ng-click="tableform.$show()" align="center">
        <span e-ng-change="applyHighlight($data)" ng-checked="Role.IsActive"
                                                                     editable-checkbox="Role.IsActive" e-form="rowform" ng-click="tableform.$show()">
        <input type="checkbox" ng-model="Role.IsActive" width="20" />
         </span>
        </td>
        </tr>
        </tbody>
        </table>
        </div>
        </div>
              <div class="col col-xs-4">
        <div class="btn-form" ng-show="tableform.$visible" style="float:right">
        <button type="submit" ng-disabled="tableform.$waiting" class="btn btn-primary fa fa-save "> Save</button>
        <input type="button" ng-disabled="tableform.$waiting" ng-click="tableform.$cancel()" class="btn btn-danger fa fa-close" value="X Cancel" />
        </div>
        </div>
        </div>
        </div>
        </div>
        </div>
        </form>

Give me the ways to achieve this requirements.

MNK
  • 121
  • 1
  • 2
  • 13
  • Buddy your code is so lengthy and it is so complex. Show us only core part and requirements. It's tottally unclear that what you are asking. – Chirag Apr 13 '17 at 05:40
  • okay Chirag. Now I edited my code. This form part is the Editable code part – MNK Apr 13 '17 at 05:55
  • While editing it is activating the entire table cells as to edit. My requirements is I need to edit particular row that row only be editable. I do not want to edit entire table cells make it as editable – MNK Apr 13 '17 at 05:58
  • oh i forget to add controller code . – MNK Apr 13 '17 at 06:13
  • have you see the [original refrence](https://vitalets.github.io/angular-xeditable/#editable-row) – xkeshav Apr 13 '17 at 06:14
  • add code snippet of `ng-click` and `ng-change` function as well – xkeshav Apr 13 '17 at 06:29
  • Yes But I dont want such type of editing. I am using inline editing. for the table td ng-click i am showing that form.show so it is showing entire table to edit – MNK Apr 13 '17 at 06:38

0 Answers0