All geek questions in one place

Why can't I bind the input type "checkbox" in cellTemplate?

Here is my plunker example: http://plnkr.co/edit/Tc9FRHAEoQlOqy7sk1Ae?p=preview

What I'm trying to do: Bind the html checkbox from field04 to my data in the cell using cellTemplate and still having access to its ng-click function.

Code in 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"); } }]);

Code from 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>

I get the correct effect in the 03 field if I write html in the Def column. Thanks to TomMorgan plunker here: http://plnkr.co/edit/9eRg9Yjl2ooeSuWMJ8x2?p=preview .

I can populate the cellTemplate html from the data in field05.

Why doesn't it work for my checkbox in field04?

I am new to angularjs and it is difficult to separate ui-grid from ng-grid solutions. I appreciate the help.

+6
source share
3 answers

I am not sure if I understand your code.

You should not put the html code in your data. So I changed it to:

  $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": '', } ];

Next: in the cell template, pass the link to the mutable value:

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

Note that the showMe() function now has a parameter:

 showMe(row.entity.field03)

In the outer scope, you must respond to the parameter:

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

(You really don't need someProp )

The $scope.toggle() function can be removed or can be called from showMe() .

In addition, I added some debugging help to your html to show you that the binding works very well:

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

Here is the Plunker . Is this what you want?

Update:

Here is another Plunker that has a check box in column 4.

+9
source

Here is Plunker using appScope, external areas do not work anymore.

I made some changes to work with the new appScope:

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

In scope, you should respond to the parameter, but I pulled from myViewModel and just created a function inside $ scope:

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

You can test the code from version 15 against my version 16. My new version works fine, but 15 does not.

+3
source

You need to use $ sce to tell ng-bind-html that the HTML content you are linking is safe.

I unlocked your plunker and the solution for your question is http://plnkr.co/edit/JyTaF8niJlf9Wpb775kb?p=preview

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

You should use this filter with ng-bind-html

0
source

Source: https://habr.com/ru/post/979889/

More articles:


All Articles