为什么我不能在cellTemplate中绑定输入类型“复选框”？

这是我plunker例如：http://plnkr.co/edit/Tc9FRHAEoQlOqy7sk1Ae?p=preview 为什么我不能在cellTemplate中绑定输入类型“复选框”？

我想要做的事：用cellTemplate 绑定的复选框HTML从我的数据的单元格field04，仍然可以访问它的NG-点击功能。

代码在app.js：从index.html的

var app = angular.module('app', ['ui.grid', 'ngSanitize']); 

app.controller('MainCtrl', ['$scope', '$log', function ($scope, $log, $sce) { 

$scope.myViewModel = { 
    someProp:'abc', 
    showMe : function(){ 
    alert(this.someProp); 
    } 
}; 

$scope.gridOptions = { 
}; 

$scope.gridOptions.columnDefs = [ 
    { name: 'field01', field: 'field01' }, 
    { name: 'field02', field: 'field02'}, 
    { name: 'field03', field: 'field03', cellTemplate: '<input type="checkbox" ng-model="row.entity.field03" ng-click="$event.stopPropagation();getExternalScopes().showMe()">'}, 
    { name: 'field04', field: 'field04', cellTemplate: 'viewTemplate2'}, 
    { name: 'field05', field: 'field05', cellTemplate: 'viewTemplate2'} 
    ]; 

$scope.gridOptions.data = [ 
    { 
     "field01": "one", 
     "field02": "01", 
     "field03": false, 
     "field04": '', 
     "field05": '', 
    }, 
    { 
     "field01": "two", 
     "field02": "02", 
     "field03": false, 
     "field04": '', 
     "field05": '', 
    }, 
    { 
     "field01": "three", 
     "field02": "03", 
     "field03": false, 
     "field04": '<input type="checkbox" ng-model="row.entity.field03" ng-click="$event.stopPropagation();getExternalScopes().showMe()">', 
     "field05": '<div><a href="#" title="icon link"><img class="icon" alt=""/></a></div>', 
    } 
]; 
$scope.toggle = function() { 
    alert("toggled"); 
} 
}]);

代码：

<body> 

<div ng-controller="MainCtrl"> 
    <div ui-grid="gridOptions" external-scopes="myViewModel" class="grid"></div> 
</div> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-sanitize.min.js"></script> 
<script src="app.js"></script> 
<script type="text/ng-template" id="viewTemplate2"> 
    <span ng-bind-html="row.entity[col.field]"></span> 
</script> 

</body>

如果我写的columnDef的HTML我实现field03正确的效果。感谢TomMorgan的闯入者：http://plnkr.co/edit/9eRg9Yjl2ooeSuWMJ8x2?p=preview。

我可以用field05中的数据填充cellTemplate。

为什么它不适用于field04中的复选框？

我是angularjs的新手，很难从“ng-grid”解决方案中分离出“ui-grid”解决方案。我很感激帮助。

来源

2014-12-18 amadis77

有没有你不能把你想要的一个理由columnDefs中cellTemplate中的HTML？是否因为你想要的HTML会作为你的数据进入？你为field03实现它的方式将是正确的做法。使用ui-grid（即ng-grid 3.0）时，您希望将自定义HTML放在cellTemplate中。 – nairys 2014-12-19 02:01:54

当数据进来时，我必须以某种方式过滤它。例如，field03是“权限”，如果“权限”：“canEdit”为真，我需要显示一个编辑图标。此外，该行项目可能有一个链接到它的文档，如果需要的话，我需要在field03中的“canEdit”图标旁边显示一个文档链接图标。在“ui-grid”中我无法弄清楚如何在数据加载到网格中时运行这样的脚本。我可以在jqgrid中使用 afterInsertRow：function（rowid，data）{} – amadis77 2014-12-19 19:29:40

您可以使用角度构建自定义过滤器来处理该逻辑。然后你可以调用该列的过滤器，如下所示：'{name：'field04'，field：'field04'，cellFilter：'myNewFilter'}' – nairys 2014-12-19 19:46:07

我不知道我是否了解您的代码。

您不应该在您的数据中放入html代码。所以，我把它改为：

$scope.gridOptions.data = [ 
     { 
      "field01": "one", 
      "field02": "01", 
      "field03": false, 
      "field04": '', 
      "field05": '', 
     }, 
     { 
      "field01": "two", 
      "field02": "02", 
      "field03": false, 
      "field04": '', 
      "field05": '', 
     }, 
     { 
      "field01": "three", 
      "field02": "03", 
      "field03": false, 
      "field04": '', 
      "field05": '', 
     } 
    ];

下一页：在你的模板传递给改变了值的参考：

{ name: 'field03', field: 'field03', cellTemplate: '<input type="checkbox" 
    ng-model="row.entity.field03" ng-click="$event.stopPropagation(); 
    getExternalScopes().showMe(row.entity.field03)">'}

注意功能现在有一个参数：

showMe(row.entity.field03)

在外部示波器中，您应该对参数做出反应：

$scope.myViewModel = { 
    someProp:'abc', 
    showMe : function(value){ 
    alert('toggled to: '+value); 
    } 
};

（你并不真的需要someProp）

的$scope.toggle()功能可以删除，或者可以从被调用。

此外，我添加了一些调试帮助你的HTML向您展示的结合非常有效：

<div ng-controller="MainCtrl"> 
    <div ui-grid="gridOptions" external-scopes="myViewModel" class="grid"></div> 
    <hr> 
    {{gridOptions.data | json}} 
</div>

这里是一个Plunker。那是你要的吗？

更新：

这里是另一个Plunker已在列中的复选框4.

来源

2014-12-19 17:49:14 mainguy

将html放入数据中是我做客户端的一部分。当数据进来时，我检查每个项目的“permissions”属性。例如，如果“permissions”有“canEdit：true”，“hasDocument：true”在单个单元格中显示这些相应的图标文档图标需要有一个链接与它关联到实际的文件在jqgrid我解决了这个通过使用“afterInsertRow”函数但在ui网格中，我不知道如何做同样的事情，我应该发表一个关于这个问题的新问题吗？如果我做得正确，我不会有复选框cellTemplate问题？ – amadis77 2014-12-19 19:40:47

这里是一个Plunker与另外，AppScope，外部范围不工作了。

我已经做了一些改变与新AppScope还能工作：

{ name: 'field03', field: 'field03', cellTemplate: '<input type="checkbox" 
    ng-model="row.entity.field03" ng-click="grid.appScope.showMe(row.entity.field03)">'}

在您应该对参数作出反应的范围，但我从myViewModel拉，刚创建在$范围功能：

$scope.showMe : function(value){ 
    alert('toggled to: '+value); 
};

您可以从版本15测试代码与我的版本16.我的新版本运行正常，但没有15。

来源

2015-06-05 16:57:06 Vasco

请在您的答案中包含相关的代码位。 – kaz 2015-06-05 17:08:28

我从来没有在这里发布。它花了一些时间来确定为什么我的代码没有得到答案。 – Vasco 2015-06-05 17:15:23

您需要使用$ sce来告诉ng-bind-html您绑定的HTML内容是安全的。

我已付出你的plunker并为您的问题的解决方案是http://plnkr.co/edit/JyTaF8niJlf9Wpb775kb?p=preview

app.filter('unsafe', function ($sce) { 
     return $sce.trustAsHtml; 
    });

你必须使用此过滤器，NG-收口HTML

来源

2017-01-12 06:57:20 Gaurav

为什么我不能在cellTemplate中绑定输入类型“复选框”？

回答

相关问题