如何改变ui-grid中显示的内容?
How to change displayed content in ui-grid?
我在我的 angulrjs 项目中使用 ui网格:
显示内容如下:
$scope.arr = [{id:'124',name:'Max', IsMale:'true'},
{id:'589',name:'Anna', IsMale:'false'},
{id:'45',name:'Donna', IsMale:'false'},
{id:'567',name:'Mark', IsMale:'true'}];
这里是UI-GRID定义:
$scope.gridOptions = {
enableColumnMenus: false,
enableSorting: true,
enableFiltering: false,
enableToopTip: true,
enableHorizontalScrollbar: 0,
onRegisterApi: function (gridApi) {
gridApi = gridApi
}
}
$scope.gridOptions.columnDefs = [
{ name: 'Name ', field: 'name', cellTooltip: true, headerTooltip: true },
{ name: 'Id ', field: 'id', cellTooltip: true, headerTooltip: true },
{ name: 'IsMail ', field: 'IsMale', cellTooltip: true, headerTooltip: true }];
$scope.gridOptions.data = $scope.arr;
这是模板:
<div id="grid1" ui-grid="gridOptions" class="grid"></div>
这里正在工作plunker。
我想更改 ui-grid 中 IsMal
字段的显示内容,其中字段显示 "true" 我需要显示 "Yes" 而哪里是 false I需要显示"No".
有什么想法可以更改 ui-grid 字段中显示的内容吗?
我更改了你的 $scope.arr 所以你的 isMale 实际上是一个布尔类型。
$scope.arr = [{id:'124',name:'Max', IsMale:true},
{id:'589',name:'Anna', IsMale:false},
{id:'45',name:'Donna', IsMale:false},
{id:'567',name:'Mark', IsMale:true}];
然后我在您的 gridOptions 中添加了一个 cellTemplate。
$scope.gridOptions.columnDefs = [
{ name: 'IsMail ', field: 'IsMail', cellTooltip: true, headerTooltip: true, cellTemplate: '<div><p ng-if="COL_FIELD">YES</p><p ng-if="!COL_FIELD">NO</p></div>' }];
我在我的 angulrjs 项目中使用 ui网格:
显示内容如下:
$scope.arr = [{id:'124',name:'Max', IsMale:'true'},
{id:'589',name:'Anna', IsMale:'false'},
{id:'45',name:'Donna', IsMale:'false'},
{id:'567',name:'Mark', IsMale:'true'}];
这里是UI-GRID定义:
$scope.gridOptions = {
enableColumnMenus: false,
enableSorting: true,
enableFiltering: false,
enableToopTip: true,
enableHorizontalScrollbar: 0,
onRegisterApi: function (gridApi) {
gridApi = gridApi
}
}
$scope.gridOptions.columnDefs = [
{ name: 'Name ', field: 'name', cellTooltip: true, headerTooltip: true },
{ name: 'Id ', field: 'id', cellTooltip: true, headerTooltip: true },
{ name: 'IsMail ', field: 'IsMale', cellTooltip: true, headerTooltip: true }];
$scope.gridOptions.data = $scope.arr;
这是模板:
<div id="grid1" ui-grid="gridOptions" class="grid"></div>
这里正在工作plunker。
我想更改 ui-grid 中 IsMal
字段的显示内容,其中字段显示 "true" 我需要显示 "Yes" 而哪里是 false I需要显示"No".
有什么想法可以更改 ui-grid 字段中显示的内容吗?
我更改了你的 $scope.arr 所以你的 isMale 实际上是一个布尔类型。
$scope.arr = [{id:'124',name:'Max', IsMale:true},
{id:'589',name:'Anna', IsMale:false},
{id:'45',name:'Donna', IsMale:false},
{id:'567',name:'Mark', IsMale:true}];
然后我在您的 gridOptions 中添加了一个 cellTemplate。
$scope.gridOptions.columnDefs = [
{ name: 'IsMail ', field: 'IsMail', cellTooltip: true, headerTooltip: true, cellTemplate: '<div><p ng-if="COL_FIELD">YES</p><p ng-if="!COL_FIELD">NO</p></div>' }];