Как изменить отображаемый контент в ui-grid?

Question

Как изменить отображаемый контент в ui-grid?

0

Я использую uigrid в моем проекте angulrjs:

Вот контент для отображения:

   $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 defenition:

    $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>

Здесь работает плукер.

Я хочу изменить отображаемое содержимое поля IsMal в ui-grid, где filed показывает "true" Мне нужно отобразить "Да", а где false. Мне нужно отобразить "Нет".

Как я могу изменить отображаемый контент в поле ui-grid?

Michael 26 июль 2016, в 12:45

Источник

Теги:

angularjs

angular-ui-grid

ui-grid

1 ответ

Ещё вопросы

DevTrong · Accepted Answer · 2016-07-26T09-51-00.000Z

Я изменил ваш $ 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}];

И затем я добавил cellTemplate в gridOptions.

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

Вы можете разместить плункер? Я не могу заставить ваше решение работать!