个人中心
gpt4 book ai didi

angular-ui-grid - 为什么我不能在 cellTemplate 中绑定(bind)输入类型 "checkbox"？

转载 作者：行者123 更新时间：2023-12-04 10:24:44 26 4
gpt4 key购买 nike

这是我的 plunker 示例: http://plnkr.co/edit/Tc9FRHAEoQlOqy7sk1Ae?p=preview

我正在尝试做的事情:
使用 cellTemplate 将我数据中 field04 中的复选框 html 绑定(bind)到单元格，并且仍然可以访问其 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 在这里的 plunker: http://plnkr.co/edit/9eRg9Yjl2ooeSuWMJ8x2?p=preview .

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

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

我是 angularjs 的新手，很难将“ui-grid”解决方案与“ng-grid”解决方案分开。我很感激帮助。

最佳答案

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

您不应该将 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)

在外部范围内，您应该对参数使用react: 
$scope.myViewModel = {
  someProp:'abc',
  showMe : function(value){
     alert('toggled to: '+value);
  }
};

(你真的不需要 someProp )
$scope.toggle()函数可以被删除，或者可以从 showMe() 调用.

此外，我在您的 html 中添加了一些调试帮助，以向您展示绑定(bind)工作得很好: 
<div ng-controller="MainCtrl">
  <div ui-grid="gridOptions" external-scopes="myViewModel" class="grid"></div>
  <hr>
  {{gridOptions.data | json}}
</div>

这是 Plunker .那是你要的吗？

更新:

这是另一个 Plunker在第 4 列中有复选框。

关于angular-ui-grid - 为什么我不能在 cellTemplate 中绑定(bind)输入类型 "checkbox"？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27557227/

26 4 0
文章推荐： pymc - pymc3 中的自定义可能性
文章推荐： AngularJS、ng 重复和默认选中的单选按钮
文章推荐： json - 如何在 Scala Play 中使用可变键解析 JSON？
文章推荐： qt - 诺基亚E63手机CPU瓶颈
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com