无法在Angular-Datatables中使用ng-model呈现<input />元素

时间:2018-04-12 14:03:11

标签: angularjs datatables angular-datatables

使用angularjs 1.6.9

解析错误

我正在使用angularjs数据表并尝试在渲染行中包含ng-model指令,如下所示:

vm.dtColumns = [
    DTColumnBuilder.newColumn(null)
        .withTitle('')
        .notSortable()
        .withOption('width', '5%')
        .renderWith(function (data, type, full, meta) {
            var html = '<input type="checkbox" ng-model="vm.selected[' + data._id + ']"/>';
            console.log(html);
            return html;
        }),
    DTColumnBuilder.newColumn('number')
        .withTitle('Number')
        .withOption('width', '35%'),
    DTColumnBuilder.newColumn('name')
        .withTitle('Name')
        .withOption('width', '50%'),
    DTColumnBuilder.newColumn('revisionNumber')
        .withTitle('Revision')
        .withOption('width', '10%')
];

我得到的是一个像这样的解析异常:

Syntax Error: Token 'a4e90d73bb003d8a9d52b6f' is unexpected, expecting []] at column 14 of the expression [vm.selected[5a4e90d73bb003d8a9d52b6f]] starting at [a4e90d73bb003d8a9d52b6f]].

该html行正在评估:

<input type="checkbox" ng-model="vm.selected[5a4e90d73bb003d8a9d52b6f]"/>

我不跟随。它看起来不错。我该如何解决?

跟进以下答案:

在我使用建议的解决方案之后:

return '<input type="checkbox" ng-model="vm.selected[data._id]"/>';

我的DOM看起来像这样:

enter image description here

这使得所有值都被赋值给同一个变量。对?

1 个答案:

答案 0 :(得分:1)

data._id生成的字符串需要用属性访问器中的引号括起来:

vm.dtColumns = [
    DTColumnBuilder.newColumn(null)
        .withTitle('')
        .notSortable()
        .withOption('width', '5%')
        .renderWith(function (data, type, full, meta) {
            var accessor = "['" + data._id + "']";
            var directive = 'ng-model="selected' + accessor + '"';
            var html = '<input type="checkbox" ' + directve + ' />';
            console.log(html);
            return html;
        }),

这将评估为:

 ̶ ̶<̶i̶n̶p̶u̶t̶ ̶t̶y̶p̶e̶=̶"̶c̶h̶e̶c̶k̶b̶o̶x̶"̶ ̶n̶g̶-̶m̶o̶d̶e̶l̶=̶"̶v̶m̶.̶s̶e̶l̶e̶c̶t̶e̶d̶[̶5̶a̶4̶e̶9̶0̶d̶7̶3̶b̶b̶0̶0̶3̶d̶8̶a̶9̶d̶5̶2̶b̶6̶f̶]̶"̶/̶>̶

  <input type="checkbox" ng-model="vm.selected['5a4e90d73bb003d8a9d52b6f']"/>

这假定vm.selected被初始化为对象。