Question

我正在寻找编辑内联表格行的解决方案。非常像fiddle，但也有人口稠密的组合框。

function Ctrl($scope) {
    $scope.model = {
        contacts: [{
            id: 1,
            name: "Ben",
            age: 28
        }, {
            id: 2,
            name: "Sally",
            age: 24
        }, {
            id: 3,
            name: "John",
            age: 32
        }, {
            id: 4,
            name: "Jane",
            age: 40
        }],
        selected: {}
    };

    // gets the template to ng-include for a table row / item
    $scope.getTemplate = function (contact) {
        if (contact.id === $scope.model.selected.id) return 'edit';
        else return 'display';
    };

    $scope.editContact = function (contact) {
        $scope.model.selected = angular.copy(contact);
    };

    $scope.saveContact = function (idx) {
        console.log("Saving contact");
        $scope.model.contacts[idx] = angular.copy($scope.model.selected);
        $scope.reset();
    };

    $scope.reset = function () {
        $scope.model.selected = {};
    };
});

如何制作内联可编辑的组合框？每行应该有一个名称，年龄和一组选项。

Answer 1

如果你使用ng-grid而不是html表，那就更容易了，我会冒昧地说更好。网格具有内置编辑功能，您可以自定义编辑器的类型，以便您的单元格可以显示为纯文本，但使用组合框进行编辑。

这是一个plunker，它在Gender列上显示了一个可编辑的组合框： http://plnkr.co/edit/zsxqZNQCnpFySjSWcf1D?p=preview

{field:'gender', displayName: 'Gender', enableCellEdit: true,editableCellTemplate: '<span id="gender"><select ng-class="\'colt\' + col.index" + ng-input="COL_FIELD" ng-model="COL_FIELD" ng-options="c.value as c.name for c in genders"></select></span>'}]

以下是ng-grid的文档： http://angular-ui.github.io/ng-grid/

如何使用angularJS编辑表格行？

1 个答案: