Philip Isaacs Philip Isaacs - 6 months ago 59
AngularJS Question

using ng-click to update every cell in a table column

I'm new to Angular and I was trying to figure out how to have the data in one of the columns in a table I made convert from one number format to another when the user clicks on the top of the table cell. I've create a filter already, but i don't know how to call it so it effects all the cells in the table.

<tr ng-repeat="x in data">
<td>{{x.id}}</td>
<td>{{x.name}} </td>
<td>{{x.desc}}></td>
<td>{{x.number}}</td> <--- THIS IS WHAT I WANT TO CONVERT
</tr>


I'm not even sure where to start with this. I basically have a ng-click directive call "convert" which I've defined in the controller. I know that if I define a variable in the $scope (such as $scope.foo = "1") and then call the convert() function I can replace the value like this:

$scope.convert = function(){
$scope.foo = 2;
}


And then my table updates with that value. But what if every table cell in that column has a different value, and I basically want to run that value through a filter I've made.

Any suggestions on how to approach this?

Answer

You said you already have a filter? Then just give your filter an argument 'numberFormat':

angular. module('yourModule'). filter('yourFilter', function() { return function(input, numberFormat) { // convert the input according to the numberFormat return filteredValue; }; });

Then you can update the format in your convert() scope-method:

$scope.convert = function(){ $scope.numberFormat = 'long'; }

and pass it to your filter:

<td>{{x.number | yourFilter:numberFormat}}</td>

BTW: Read about controllerAs - IMHO it is a better practice to store values at the controller rrather than directly on the scope.

Comments