Отформатируйте столбец сетки ui-grid в виде валюты (RC 3.0)

Параметры сетки ниже отображают данные, как ожидалось. Но если я попытаюсь отформатировать значение row.entity[col.field] в моей cellTemplate, я не получаю никаких возвращенных данных.

код:

$scope.gridOptions = {
    enableSorting: true,
    columnDefs: [
        {name: 'Award Title', field: 'projectTitle', minWidth: 100 },
        {name: 'Amount', field: 'awardAmount', cellTemplate: '<div>{{Number(row.entity[col.field]).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,')}}
    ]
};

Приветствуется любое руководство по форматированию столбца как валюты.

Спасибо.

Ответ 1

Вы можете использовать 'currency' cellFilter для форматирования ваших данных.

$scope.gridOptions = {
    enableSorting: true,
    columnDefs: [
        {name: 'Award Title', field: 'projectTitle', minWidth: 100 },
        {name: 'Amount', field: 'awardAmount', cellFilter: 'currency' }}
    ]
};

Ответ 2

Посмотрите на эту приятную статью: http://brianhann.com/6-ways-to-take-control-of-how-your-ui-grid-data-is-displayed/

В итоге ваши варианты:

Наручники
Фильтры ячейки
Шаблоны сотовых телефонов
Ссылки
Кнопки
Пользовательские директивы

Я сам использовал параметр Cell Filter (код переведен на ваш случай, не проверен):

$scope.gridOptions = {
   enableSorting: true,
   columnDefs: [
      {
          name: 'Award Title', 
          field: 'projectTitle', minWidth: 100
      }, {
          name: 'Amount', 
          field: 'awardAmount', 
          cellFilter: 'currencyFilter'
      }
   ] 
};

С фильтром, определенным ниже:

app.filter('currencyFilter', function () { 
    return function (value) {
        return value.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
    }
});

Cheers, G

Ответ 3

Вы можете использовать атрибут cellFilter и фильтр по умолчанию angularJS Live Demo - http://plnkr.co/edit/NSiCrM?p=preview

$scope.colDefs = [
    { field: 'firstName', 
      displayName: 'FN' 
    },
    { field: 'amount',
      displayName: 'AMT', 
      cellFilter: 'currency'
    }
  ];

Ответ 4

Я опаздываю на вечеринку, но хочу поделиться лучшим, что сработало для меня:

JS:

myGrid.columnDefs = [{
    field: "Sale",
    cellFilter: 'number:2',
    cellClass:'currency'
}]

CSS

.currency{
    text-align:right;
}
.currency .ui-grid-cell-contents:before{
    content: '$';
    float: left;
}

Конечный результат:

Детали:

Сначала я попытался использовать cellFilter:'currency', как упоминалось в предыдущем ответе, но он не учитывал различные суммы в долларах и не выравнивал значения справа:

Итак, я добавил класс currency и right-align, который фиксировал выравнивание, но не разные долларовые суммы.

К сожалению, я не смог найти легкое решение для этого (хотя я чувствую, что там есть где-то), поэтому мне пришлось изменить cellFilter от currency до number:2 - это означает "Всегда покажите 2 десятичных знака".

Затем мне понадобился знак доллара слева от ячейки (чтобы избежать разных сумм в долларах), для чего я добавил следующий css:

.currency .ui-grid-cell-contents:before{
    content: '$';
    float: left;
}

Который оставил меня с окончательным результатом:

Ответ 5

Хорошо возьмите ваш $из обычного выражения для стартеров. Просто положите его после тега. Выражение, кроме $part, работает. Похоже, вы просто пытаетесь вызвать функцию Javascript внутри {{}}, а не называть что-то в своем контроллере. Переместите Number(). ToFixed(). Замените на функцию в вашем контроллере и вызовите это вместо

     $scope.asCurrency = function(val) {
       return Number(...).toFixed()......
     };

Ответ 6

Попробуйте что-то вроде этого, примените собственные фильтры angular

cellTemplate: "<div>[[ row.entity[col.field]  | currency:'Q':2 ]]"