Concatenating fields in angularjs

Question

consider the following:

 <ul class="contracts">
            <li ng-repeat="contract in contracts" class="thumbnail">
                <h3>ID:{{contract.Id}}</a></h3>                    
                <h4>Owner: {{contract.Person.firstName}} {{contract.Person.lastName}}</h4>
           </li>
  </ul>

ok, that works, I can display the owner by concatenating the firstName and the lastName. However, it'd be better to have a property FullName somewhere. That property would either return firstname + lastname or 'None' if Person is null.

My problem is that I don't know where to add this property. It feels strange to add it to the contract controller, as it's more related to the Person. But I don't have a Person controller. What would be the approach for this ?

holographic-principle · Accepted Answer · 2013-04-15 10:44:18Z

2

Assuming you have a Contract service

angular.factory('Contract', ['$resource', function($resource) {
  var Contract = $resource(...);
  ...

  Contract.prototype.getOwner = function() {
    if (this.Person) {
      return this.Person.firstName + this.Person.lastName;
    }
    return 'None';
  }

  return Contract;

}]);

You could then use it as

<h4>Owner: {{contract.getOwner()}}</h4>

edited Apr 15, 2013 at 10:44

answered Apr 15, 2013 at 9:44

holographic-principle

19.7k10 gold badges48 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Sam Over a year ago

I do have a Contract service and I could do that indeed. Is this a common thing to do ? I know I'm annoying :) But I just want to apply best practices as much as I can from the beginning.

holographic-principle Over a year ago

Check out this repo to see more of this and other approaches used github.com/angular-app/angular-app. It seems like a reasonable thing to do. I wouldn't name my properties in PascalCase though (Person vs person)

Ben Lesh Over a year ago

Be warned: This function will be evaluated on every $digest. Just put a console.log() inside of it and you'll see. It's generally a better idea to process your Contract or Person object when it changes and update the property rather than use a method like this. It's not wrong do to things this way, but it may be less performant, especially in a large repeater.

holographic-principle Over a year ago

It's as performant as {{contract.Person && contract.Person.firstName + contract.Person.lastName || 'None'}}, although much more readable. For static bindings, you might want to consider github.com/Pasvaz/bindonce @blesh

Ben Lesh Over a year ago

It sure is. But that's not quite what I'm suggesting. I'm suggesting the concatenation can be done one time at the time the collection (or object) is updated/created.

|

Collectives™ on Stack Overflow

Concatenating fields in angularjs

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related