| Column 1 | Column 2 | Column 3 |
|---|---|---|
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |
| Total: | {{ calculateTotal(‘column1’) }} | {{ calculateTotal(‘column2’) }} |
Explanation:
In the provided example, we have a table with three columns (Column 1, Column 2, Column 3). Each column has three rows with numeric values.
To calculate the sum of each column and display it in the footer, we use an Angular controller called 'myController'. Inside this controller, there is a function called 'calculateTotal' which takes the column name as a parameter.
The function uses JavaScript's document.getElementsByTagName to get all the table rows in the tbody, and then iterates over each row. Inside the loop, it retrieves the value of the specified column for each row and adds it to the 'total' variable.
Finally, the function returns the calculated total, which is then displayed in the footer of the table using Angular's double curly brace notation ({{ }}).
Note: This example assumes that the Angular module and controller have been properly set up in the application. Make sure to include them in your code as needed.