Question

在angularjs脚本中，我有＆＃34; ng-grid＆＃34;模块，在一列中，我想显示复选框控件而不是从json数据返回的true / false字符串。如果json变量为true，则必须选中该复选框，如果为false，则必须选中该复选框。

我想我必须使用模板，但我不知道如何。

如何显示复选框？有一些例子吗？

由于

Answer 1

像这样：使用更改处理程序更新

    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);
      }
    });

如果您只想显示值，现在可以添加更改处理程序或仅将输入设置为disable / readonly。

Plunker

Plunker with change handler

（我很抱歉Jacob和Enos！）

Answer 2

定义字段的网格定义时，需要定义cellTemplate。有关示例

，请参阅文档中的“String-based Cell Templates”部分

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

它使用div，您可以使用input。

ng-grid：如何显示true / false值的复选框

2 个答案: