阻止整个表格单元格进行编辑，只允许使用xeditable with angularjs编辑单击的行

Question

我正在使用x-editable来编辑表格。它正在激活整个表格单元格和行以进行编辑。我只需要编辑单击的行。我用来编辑表格的代码。如何使用x-editable将特定行设置为可编辑。在span标签内我使用ng-click来显示表格表格。$ show（） ng-change事件用于设置已编辑单元格的颜色。我添加了以下代码

控制器代码：

    $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>

告诉我实现这一要求的方法。