可编辑不工作 AngularJS

Question

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

单击编辑时，Id 的值未传递到 Id 的可编辑文本框。它还显示只读值以及可编辑的文本框。

请帮忙！

代码如下：

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);

Answer 1

这是因为在 userTable 中，ID 是字符串而不是数字，而您正试图将其放入数字字段中。这是 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 ' }];

新版本：http://plnkr.co/edit/LXcuRNuAXVaKDA6VvOtW?p=preview

另一种选择是将字段更改为 editable-text 而不是 editable-number。

Answer 2

您没有在显示的任何地方隐藏您的字段。所以table数据应该是这样的

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

可编辑不工作 AngularJS

Xeditable not working AngularJS

javascript

angularjs

x-editable