ng-grid: how show checkbox for true/false value

Question

In angularjs script i have the "ng-grid" module and, in one column, i want show the checkbox control instead of the true/false string returned from json data. The checkbox must be checked if the json variable is true and unchecked if false.

I think i must use the template but i don't know how.

How can i show the checkboxes? There are some examples?

Thanks

Solution 1

Like this: updated with change handler

    var app = angular.module('myApp', ['ngGrid']);
    app.controller('MyCtrl', function($scope) {
      $scope.myData = [{
        name: "Moroni",
        age: 50,
        dude: true
      }, {
        name: "Tiancum",
        age: 43,
        dude: true
      }, {
        name: "Jacob",
        age: 27,
        dude: false
      }, {
        name: "Nephi",
        age: 29,
        dude: true
      }, {
        name: "Enos",
        age: 34,
        dude: false
      }];
      $scope.gridOptions = {
        data: 'myData',
        columnDefs: [{
          field: 'name',
          displayName: 'Name'
        }, {
          field: 'age',
          displayName: 'Age'
        }, {
          field: 'dude',
          displayName: 'Dude',
          cellTemplate: '<input type="checkbox" ng-model="row.entity.dude" ng-click="toggle(row.entity.name,row.entity.dude)">'
        }]
      };

      $scope.toggle = function(name, value) {
        //do something usefull here, you have the name and the new value of dude. Write it to a db or else. 
        alert(name + ':' + value);
      }
    });

You now can add an change handler or just set the input to disable/readonly if you just want to display the value.

Plunker

Plunker with change handler

(I'm so sorry for Jacob and Enos!)

Solution 2

You need to define a cellTemplate when you define you ng-grid definition of fields. See "String-based Cell Templates" section in the documentation for example

 {field:'age', displayName:'Age', cellTemplate: '<div ng-class="{green: row.getProperty(col.field) > 30}"><div class="ngCellText">{{row.getProperty(col.field)}}</div></div>'}]
        };

It uses div, you can use input.