[英]ng-grid: how show checkbox for true/false value
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. 在angularjs脚本中,我有“ng-grid”模块,在一列中,我想显示复选框控件而不是从json数据返回的true / false字符串。 The checkbox must be checked if the json variable is true and unchecked if false.
如果json变量为true,则必须选中该复选框,如果为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 谢谢
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 with change handler 带有更换处理程序的Plunker
(I'm so sorry for Jacob and Enos!) (我很抱歉雅各布和伊诺斯!)
You need to define a cellTemplate when you define you ng-grid definition of fields. 定义字段的网格定义时,需要定义cellTemplate。 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
. 它使用
div
,你可以使用input
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.