Xeditable not working AngularJS

Question

http://plnkr.co/edit/bQyQNBcId9sp1l69UvTO?p=preview

On click of edit the value of Id is not getting passed to the editable text box for Id. Also it shows the read only value as well a editable text box.

Please help!

Here is the code:

HTML:

<!DOCTYPE html>
<html ng-app="xeditableTable">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-xeditable/0.6.0/css/xeditable.css"></script>
    <link href="../Content/bootstrap.css" rel="stylesheet" />
    <script src="app%20.js"></script>
    <script src="xeditable.js"></script>
</head>
<body ng-controller="XeditableTableController">
    <form editable-form name="formTable" onaftersave="saveTable(usersTable)" oncancel="cancel()">
        <table class="table table-bordered table-hover table-condensed table-striped">
            <tr>
                <td> Id</td>
                <td>Name</td>
                <td>Options</td>
                <td>Comment</td>
                <td><span ng-show="formTable.$visible">Action</span></td>
            </tr>
            <tr ng-repeat="user in usersTable">
                <td>
                    <span editable-number="user.Id" e-form="formTable">
                        {{user.Id}}
                    </span>
                </td>
                <td>
                    <span editable-text="user.Name" e-form="formTable">
                        {{user.Name}}
                    </span>
                </td>
                <td>
                    <span editable-select="user.Option" e-form="formTable" e-ng-options="o.value as o.text for o in options">
                        {{showOptions(user)}}
                        </span>
                </td>
                <td>
                    <span editable-textarea="user.Comment" e-form="formTable">
                        {{user.Comment}}
                    </span>
                </td>            
                <td>
                <button type="button" ng-show="formTable.$visible" class="btn btn-danger pull-right">Delete</button>
                </td>
            </tr>
        </table>
        <div class="btn-edit">
            <button type="button" class="btn btn-default" ng-show="!formTable.$visible" ng-click="formTable.$show() ; editUsersTableFunc(usersTable)">
                Edit
            </button>
        </div>

        <div class="btn-edit"  ng-show="formTable.$visible" >
            <button type="submit" class="btn btn-default" ng-disabled="formTable.$waiting">
                Save
            </button>
            <button type="button" class="btn btn-default" ng-disabled="formTable.$waiting" ng-click="formTable.$cancel()">
                Cancel
            </button>
        </div>
    </form>
</body>
</html>

JS:

function XeditableTableController($scope, $filter) {


$scope.usersTable = [{ Id: '1', Name: 'a', Option: '2', Comment: 'Awesome' },
{ Id: '2', Name: 'b', Option: '1', Comment: 'Amazing' },
{ Id: '3', Name: 'c', Option: '4', Comment: 'MindBlowing' },
{ Id: '4', Name: 'd', Option: '3', Comment: 'Like cellRenderers, cellEditor components ' },
{ Id: '5', Name: 'e', Option: '2', Comment: 'Like cellRenderers, cellEditor components ' }];

$scope.options = [
{ value: 1, text: 'Option1' },
{ value: 2, text: 'Option2' },
{ value: 3, text: 'Option3' },
{ value: 4, text: 'Option4' }
];

$scope.showOptions = function (user) {
    var selected = [];
    if (user.Option) {
        selected = $filter('filter')($scope.options, { value: user.status });
    }
    return selected.length ? selected[0].text : 'Not set';
};

$scope.editing = false;
$scope.newField = {};


$scope.editUsersTableFunc = function (usersTable) {
    $scope.newField = angular.copy(usersTable);
}

$scope.saveTable = function (usersTable) {
    debugger;
    $scope.newField = angular.copy(usersTable);
    $scope.usersTable = $scope.newField;
}

$scope.cancel = function () {
    $scope.usersTable = $scope.newField;

}
}

XeditableTableController.$inject = ['$scope', '$filter'];
angular.module('xeditableTable', ['xeditable']);
angular.module('xeditableTable').controller('XeditableTableController', XeditableTableController);

ManishChahal · Accepted Answer · 2017-01-20 06:08:13Z

1

You are not hiding your fields anywhere that are being displayed. So table data should be like this

<td>
                    <span editable-number="user.Id" e-form="formTable" ng-show="!formTable.$visible">
                        {{user.Id}}
                    </span>

                </td>
                <td>
                    <span editable-text="user.Name" e-form="formTable" ng-show="!formTable.$visible">
                        {{user.Name}}
                    </span>
                </td>
                <td>
                    <span editable-select="user.Option" e-form="formTable" e-ng-options="o.value as o.text for o in options" ng-show="!formTable.$visible">
                        {{showOptions(user)}}
                        </span>
                </td>
                <td>
                    <span editable-textarea="user.Comment" e-form="formTable" ng-show="!formTable.$visible">
                        {{user.Comment}}
                    </span>
                </td>

answered Jan 20, 2017 at 6:08

ManishChahal

1931 silver badge13 bronze badges

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

2 Comments

Aditi Over a year ago

Ohooo... Thanks a lot! :)

Gabriel Kohen Over a year ago

@ManishChahal this is a bit a workaround. See answer above in response to the comment

Gabriel Kohen · Accepted Answer · 2017-01-19 17:56:43Z

0

It's because in the userTable the IDs where strings rather than numbers and you were trying to put it into a numeric field. This is the new version of userTable:

    $scope.usersTable = [{ Id: 1, Name: 'a', Option: '2', Comment: 'Awesome' },
            { Id: 2, Name: 'b', Option: '1', Comment: 'Amazing' },
            { Id: 3, Name: 'c', Option: '4', Comment: 'MindBlowing' },
            { Id: 4, Name: 'd', Option: '3', Comment: 'Like cellRenderers, cellEditor components ' },
            { Id: 5, Name: 'e', Option: '2', Comment: 'Like cellRenderers, cellEditor components ' }];

New version: http://plnkr.co/edit/LXcuRNuAXVaKDA6VvOtW?p=preview

Another option is instead to change the field to editable-text instead of editable-number.

answered Jan 19, 2017 at 17:56

Gabriel Kohen

4,3264 gold badges34 silver badges47 bronze badges

2 Comments

Aditi Over a year ago

Ya now I feel stupid... thanks though :) You have any idea why it shows the displays the readonly value as well as the text boxes on the click of edit?

Gabriel Kohen Over a year ago

You where missing proper reference to the CSS files (including Bootstrap). I've added the following (sorry for the formatting problems in SO comments): ``` <link rel="stylesheet" href="cdnjs.cloudflare.com/ajax/libs/angular-xeditable/0.6.0/css/…> <link rel="stylesheet" href="cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/…> ``` See updated Plunkr: plnkr.co/edit/gIw7ITCyfOfmNnMMDwKl?p=preview

Collectives™ on Stack Overflow

Xeditable not working AngularJS

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related