这是我的plunker示例: http ://plnkr.co/edit/Tc9FRHAEoQlOqy7sk1Ae？p = preview
我正在尝试做的事情: 使用cellTemplate将我的数据中的field04的复选框html绑定到单元格,并仍然可以访问其ng-click功能.
app.js中的代码:
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");
}
}]);
index.html中的代码:
<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和html.
为什么它不适用于field04中的复选框？
我是angularjs的新手,很难将"ui-grid"解决方案从"ng-grid"解决方案中分离出来.我很感激帮助.
mai*_*guy 10
我不确定我是否理解你的代码.
你不应该在你的数据中加入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()现在有一个参数:
showMe(row.entity.field03)
在外部作用域中,您应该对参数做出反应:
$scope.myViewModel = {
someProp:'abc',
showMe : function(value){
alert('toggled to: '+value);
}
};
(你真的不需要someProp)
该$scope.toggle()功能可以删除,也可以从中调用showMe().
此外,我在你的html中添加了一些调试帮助,告诉你绑定工作得很好:
<div ng-controller="MainCtrl">
<div ui-grid="gridOptions" external-scopes="myViewModel" class="grid"></div>
<hr>
{{gridOptions.data | json}}
</div>
这是一个Plunker.那是你要的吗？
更新:
这是另一个在第4列中有复选框的Plunker.
| 归档时间： |
|
| 查看次数： |
26129 次 |
| 最近记录： |