Looking to enhance the user experience by displaying a more friendly value in a table that utilizes ng-repeat. Consider the response model from the service below:
[{
Name : "Hon",
Gender : "M"
},
{
Name : "Hon",
Gender : "F"
},
{
Name : "Hon",
Gender : "M"
},
{
Name : "Jon",
Gender : "M"
},
{
Name : "on",
Gender : "F"
}]
The current table layout is as follows:
Name Gender
Hon M
Hon F
Hon M
Jon M
on F
However, the desired table format would be:
Name Gender
Hon Male
Hon Female
Hon Male
Jon Male
on Female
Avoiding the use of any for loop for this task is preferred. While this example is simplistic, my scenario involves multiple columns requiring similar mapping and potentially hundreds of records per page.
Is it possible to achieve this using directives or filters in AngularJS? If so, how can this be implemented? Or do you have alternative suggestions?