CODEWITHSUNDEEP
angularjsangularjs-filter
CozyAzure
CozyAzure

Reputation: 8478

Different filters on different table columns

I would like to create a table that the columns' data are formatted based on different filters.

Suppose I have an array object that looks like this:

$scope.components = [
                     {lastName:'Bob', firstName:'John',netWorth:1000},
                     {lastName:'Foo', firstName:'Bar',netWorth:2000}
                   ];

Now I would like to use ng-repeat to populate the data into the tables. Here is how I do it:

            <tr ng-repeat="component in components">
              <td ng-repeat="column in tableColumns">
                {{component[column]}}
              </td>
            </tr>

The $scope.components above is a simplistic example, but the main point is that I have such data objects that their properties are consistent but differ as according to the object. That is why I have a second ng-repeat that allows user to define what is inside tableColumns. In our case, tableColumns is an array of strings: $scope.tableColumns = ['lastName','firstName','netWorth'].

The table behaves normally. The main problem is , how do I format each individual column using a particular filter? Say, for the first column of the table, i.e the lastName property, I would want to format it using uppercase filter, the second column of the table, i.e firstName property with lowercase filter, and last column netWorth property with currency filter.

My thought process will be something along this line:

<td ng-repeat="column in tableColumn>
  {{component[column] | filterArray}}
</td>

where $scope.filterArray is an array of string of the filters that I want, like 'uppercase','currency', etc. This array of string should go in the accordance of the elements in the tableColumn array too. For example, to get the desired formatting as mentioned above, I have to declare the $scope.arrayFilter as follows: $scope.arrayFilter=['uppercase','lowercase','currency']

Any thoughts?

Upvotes: 1

Views: 1134

Answers (2)

ababashka
ababashka

Reputation: 2101

I think you can write own filter for that which will use $filter service.

So, your filter will be looking like this:

app.filter('custom', ['$filter', function ($filter) {
  return function (value, type) {
    return $filter(type)(value);
  }
}]);

Now you could use this one by next way: {{value | custom : filterName}}, for example:

{{component[column] | custom : 'uppercase'}}

Now you just need to create an object which will contain names of columns and its filters name, like this:

  $scope.filterArray = {
    'lastName': 'uppercase',
    'firstName': 'lowercase',
    'netWorth': 'currency'
  };

So now your HTML code will be looking like this:

<tr ng-repeat="component in components">
  <td ng-repeat="column in tableColumns">{{component[column] | custom : filterArray[column]}}</td>
</tr>

Everything seems to be working in demo. Hope, this will help you.

Demo: http://plnkr.co/edit/fE02ZmaUWxeG9h71TabO?p=preview

Upvotes: 1

Pedro Justo
Pedro Justo

Reputation: 4309

You can do something like that:

<td ng-repeat="column in tableColumn>
  <label ng-if="column === 1">
     {{component[column] | uppercase}}
  </label>
  <label ng-if="column === 2">
     {{component[column] | lowercase}}
  </label>

...

</td>

or you can do it using an ordered arrayFilter like you said

Upvotes: 0

Related Questions