angular-ui-grid – 为什么我不能在cellTemplate中绑定输入类型

发布时间：2020-12-17 08:46:41 所属栏目：安全来源：网络整理

导读：这是我的羽毛示例： http://plnkr.co/edit/Tc9FRHAEoQlOqy7sk1Ae?p=preview 我想做什么：使用cellTemplate将我的数据中field04的复选框html绑定到单元格,并仍然可以访问其ng-click功能. app.js中的代码： var app = angular.module('app',['ui.grid','ngSan

这是我的羽毛示例： 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",{
      "field01": "three","field02": "03","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”解决方案中分离出来.我很感激帮助.

我不确定我是否理解你的代码.

你不应该在你的数据中加入html代码.所以我改成了：

$scope.gridOptions.data = [
      {
          "field01": "one",{
          "field01": "two",{
          "field01": "three",}
    ];

下一步：在您的单元格模板中传递对更改的值的引用：

{ name: '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.这就是你想要的吗？

更新：

这是另一个Plunker,其中包含第4列中的复选框.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!