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

您没有将字段隐藏在显示的任何位置。所以表格数据应该是这样的

<tr ng-repeat="subject in subject_list | orderBy: 'sub_branch' | filter: search_subject">
                        <td><input type="checkbox" 
ng-true-value="{{subject.sub_id}}" 
ng-model="checkmodel.subject.sub_id"  
ng-true-value="subject.sub_id"
ng-name="subject_name"></td>
<td>{{subject.sub_name}}</td>
<td>{{subject.sub_branch}}</td>
<td>{{subject.sub_code}}</td>
<td>{{subject.sub_sem}}</td>
<td><select ng-model="checkmodel.subject.section" ng-disabled="!checkmodel.subject.sub_id">
                                <option value="A">A</option>
                                <option value="B">B</option>
                                <option value="C">C</option>
                                <option value="D">D</option>
                            </select></td>
                        </tr>

Answer 2

这是因为在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

另一个选择是将字段更改为可编辑文本而不是可编辑数字。

Xeditable没有工作AngularJS

2 个答案: