Angular.js data accessor

Question

I'm trying to learn Angular, and I'm stuck on the following. I have a PHP background, mostly use Laravel, and in Laravel you can use accessors in your models. So if you have a model User, which has a firstname and lastname. You can create an accessor for fullname which will return both the firstname and lastname:

public function getFullNameAttribute()
{
    return $this->firstname . ' ' . $this->lastname;
}

Now, I would like to do the same thing in Angular. I have a UserController with a user:

function UserController($scope) {
    $scope.users = [
        { firstname: 'John', lastname: 'Doe' }
    ];
}

In the "view" I want to loop over the users with ng-repeat, but instead of doing

{{ user.firstname }} {{ user.lastname }}

I would like to be able to just use

{{ user.fullname }}

Maybe it's called differently in Angular or something, but I just can't seem to find it...

Thanks for the help!

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

Angular does not yet natively provide model abstractions (beside simplistic $resource service which deals mostly with RESTfull communication layer). But that doesn't mean you can't write and re-use your own custom model accessors.

Option 1 - Use custom filter

PLUNKER

app.filter("fullName", function () {
  return function (user){
    return user && [user.firstName, user.lastName].join(' ');
  }
});

app.controller("MainCtrl", [
  "$scope", 
  function($scope) {
    $scope.user = {
      firstName: 'John', 
      lastName: 'Doe'
    };
    
  }
]);

User fullName: {{user | fullName}}

Option 2 - Use custom $resource instance accessors:

PLUNKER

app.factory('UserService', function ($resource){
  // User is an instance of $resource service which 
  // in this example uses mock server endpoint
  var User = $resource('user.json');
  
  // Custom User accessor method
  User.prototype.fullName = function(){
    return [this.firstName, this.lastName].join(' ');
  }
  
  return User;
});


app.controller("MainCtrl", [
  "$scope", 
  "UserService",
  function($scope, UserService) {
    $scope.user = UserService.get()
    
  }
]);

User fullName: {{user.fullName()}}

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Mar 30, 2014 at 15:49

Stewie

60.4k20 gold badges149 silver badges113 bronze badges

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

1 Comment

j.wittwer Over a year ago

option 2 is pretty slick

j.wittwer · Accepted Answer · 2014-03-30 16:05:08Z

2

In addition to Stewie's very sophisticated techniques, you can also use ng-init.

<div ng-repeat="user in users" 
     ng-init="user.fullname = user.firstname + ' ' + user.lastname">
  {{user.fullname}}
</div>

http://plnkr.co/zU6vM5f8pI3Veh7jr1R9

answered Mar 30, 2014 at 16:05

j.wittwer

9,4973 gold badges32 silver badges32 bronze badges

Comments

Designing the Code · Accepted Answer · 2014-03-30 16:58:57Z

0

angular does not have a model framework, here your scope is the model and any javascript object (plain old javascript object) attached to it. You might be interested in this article which talks about implementing an OO model layer on angular js. https://medium.com/opinionated-angularjs/2e6a067c73bc. Like others have said, implementing filters or directives might be the easiest and is also reusable.

answered Mar 30, 2014 at 16:58

Designing the Code

2461 silver badge5 bronze badges

Collectives™ on Stack Overflow

Angular.js data accessor

3 Answers 3

Option 1 - Use custom filter

Option 2 - Use custom $resource instance accessors:

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Option 1 - Use custom filter

Option 2 - Use custom $resource instance accessors:

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related