add formatting from scope object when binding element

Question

I have a table which is build up from a array I create in my controller. When trying to bind I would like to add formatting, for example | number, from my object array.

So, in the td-element inside tbody, I would like to use something like

row[column.rowValue] | column.filter

I've tried using {{}} around, and also tried ng-bind-template and so on..

How should I do this?

JSFIDDLE

html:

<script data-require="angular.js@*" data-semver="1.2.0" src="http://code.angularjs.org/1.2.0/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>


<div ng:controller="MyCtrl">

<table class="table table-striped table-hover table-responsive table-bordered" border="1">
        <thead style="font-weight: bold;">
            <tr>
                <th class="text-right" ng-repeat="column in columns" ng-bind="column.rowHeader"></th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="row in rows">
                <td ng-repeat="column in columns" ng-bind="row[column.rowValue] | column.filter"></td> <--doesnt work
            </tr>
        </tbody>
    </table>


</div>

js:

var app = angular.module('myApp',[]);


 function MyCtrl($scope) {
  $scope.columns = [
    { checked: true, rowValue: 'value1', rowHeader: 'Value1', filter: 'number' },
    { checked: true, rowValue: 'value2', rowHeader: 'Value2', filter: 'number' },
    { checked: true, rowValue: 'ModelName', rowHeader: 'Name' }
];

$scope.rows = [
  { value1: 100, value2: 5, ModelName: "This is a cell value" },
  { value1: 15, value2: 5, ModelName: "This is a cell value2" },
  { value1: 38, value2: 2, ModelName: "This is a cell value3" }
  ];

}

Gonzalo Pincheira Arancibia · Accepted Answer · 2015-12-22 12:57:20Z

1

Use a function in you controller for format the value and if you need use a custom filter, inject the $filter service.

var app = angular.module('myApp',[]);


function MyCtrl($scope, $filter) {
    $scope.columns = [
        { checked: true, rowValue: 'value1', rowHeader: 'Value1', filter: 'number' },
        { checked: true, rowValue: 'value2', rowHeader: 'Value2', filter: 'number' },
        { checked: true, rowValue: 'ModelName', rowHeader: 'Name' }
    ];

    $scope.formatRow = function(value, filterName){
        return $filter(filterName)(value);
    };

    $scope.rows = [
      { value1: 100, value2: 5, ModelName: "This is a cell value" },
      { value1: 15, value2: 5, ModelName: "This is a cell value2" },
      { value1: 38, value2: 2, ModelName: "This is a cell value3" }
      ];

    }

HTML

<tbody>
    <tr ng-repeat="row in rows">
       <td ng-repeat="column in columns" ng-bind="formatRow(row[column.rowValue], column.filter)"></td> 
                </tr>
</tbody>

edited Dec 22, 2015 at 12:57

answered Dec 22, 2015 at 12:44

Gonzalo Pincheira Arancibia

3,6332 gold badges26 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MrProgram Over a year ago

that doesnt help me if I wanna use other filters

Gonzalo Pincheira Arancibia Over a year ago

Check my edited answer. Consider that the alphanumeric string aren't converted in number using the native number filter.

Collectives™ on Stack Overflow

add formatting from scope object when binding element

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related