Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

What in your opinion is the best way to display complex objects in Angular?

You have some sort of return from a service used in multiple places in a app and you might have to display multiple properties, each with a specific filter in each place.

With a quick thought I can name 3 different ways but I'm just not sure if any of them is the best way or how to implement them.

Plunker

Sample (and simple) object

Lets say I have to display this object like this: John SMITH ($30.00).

{
    firstName: 'John',
    lastName: 'Smith',
    pocket: 30
}

I could easily go

{{person.firstName}} {{person.lastName | uppercase}} ({{person.pocket | currency}})

But what if I have it as a attribute somewhere, like in a ng-option

Long string

So I would need to do this

<select ng-options="(p.firstName + ' ' + (p.lastName | uppercase) + ' ' + '\(' + (p.pocket | currency) + '\)') for p in persons" ng-model="person"></select>

This is way to long and not very readable, if the same sort of formatting is going on in other places it isn't very DRY either.

Function

I could go the function route with this

$scope.formatPerson = function(person) {
    return person.firstName + ' ' + $filter('uppercase')(person.lastName) + ' ' + '\(' + $filter('currency')(person.pocket) + '\)';
}

-

<select ng-options="(formatPerson(p)) for p in persons" ng-model="person"></select>

Long, but hidden behind so not as much of a problem. But if i'm defining this on the controller it again isn't very DRY, where would a function like this belong? In the service that gives the object?

Filter

This one I like best

app.filter('person', function($filter) {
  return function(person) {
    return person.firstName + ' ' + $filter('uppercase')(person.lastName) + ' ' + '\(' + $filter('currency')(person.pocket) + '\)';
  }
});

Sure I would need to add some guards against things that aren't person objects, but should filters be used against complex objects, are they made for primitives only. Could more complex objects lead to slowdowns as the filter is constantly running through the object tree?


Are there more ways to do this, or is one of these ways the best and correct way?

share|improve this question

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.