复选框绑定在动态创建的列中不起作用答案

【问题标题】：checkbox binding not working in dynamic created column复选框绑定在动态创建的列中不起作用
【发布时间】：2017-04-19 17:19:33
【问题描述】：

在我的 Angular 应用程序中，我正在从 javascript 动态创建表格。

$("#tableName").html("<table id='dtData' name='dtData' dt-options='dtOptions' dt-columns='dtColumns' class='table table-striped table-bordered'></table>");

这是我生成列的方式

var header = data[0], dtColumns = [];

          //create columns based on first row in dataset
          for (var key in header) 
          {
             // console.log(key);
              if(key == "sendEmail")
              {
                  dtColumns.push(DTColumnBuilder.newColumn(key).withTitle("Send Email").renderWith(actionsHtml));

              }
              else
              {
                dtColumns.push(DTColumnBuilder.newColumn(key).withTitle(key));
              }
          }

这是actionsHtml函数

    function actionsHtml(data, type, full, meta) {

    return '<input type="checkbox" name="sendEmail" value="' + data+'">';
}

我在这里完成这张表

 $scope.dtColumns = dtColumns;

          //create options
          $scope.dtOptions = DTOptionsBuilder.newOptions()
            .withOption('data', data)
            .withOption('dataSrc', '');

          //initialize the dataTable
          angular.element('#dtData').attr('datatable', '');
          $compile(angular.element('#dtData'))($scope);

它创建表，然后是复选框类型的列，但它不会将值绑定到复选框。这是表

列的控制台值

但问题是.. chechbox 列绑定不起作用.. 我从 html 或 javascript 中选中/取消选中它，它不会对表/原始列表进行任何更改。

我们将不胜感激。

【问题讨论】：

你有没有机会发Plunker 来证明这个问题？
实际上太糟糕了，不能做一个笨蛋，但我试试
使用checked 属性而不是value (doc)。您编译了模板，但其中没有绑定，因此绑定不起作用，请使用 ng-bing 或 ng-checked 而不是 + data +。

标签： javascript angularjs checkbox dynamic-columns

【解决方案1】：

您可以通过简单的 if/else 数据来解决此问题。如果数据是 true，则添加 checked 属性否则不是。然后捕获onClick 事件并将某种Id 传递给该函数并相应地更新值..

类似的东西

if(key == "SendEmail")
{                   

dtColumns.push(DTColumnBuilder.newColumn(key).withTitle("Send Email")
.renderWith(function(data, type, full, meta) {
if(data){
            return '<input type="checkbox" checked="checked" name="SendEmail" onClick="SendEmail_Clicked('+Id+')">'; 
        }
else
    {
        return '<input type="checkbox"  name="SendEmail"  onClick="SendEmail_Clicked('+Id+')">'; 
    }
}));}

要调用SendEmail_Clicked，首先要绑定调用函数，否则不起作用

var dt = this;
dt.SendEmail_Clicked = SendEmail_Clicked;

更多详情，you can read this

【讨论】：