AngularJS expression with custom "filter"?

Question

I'm using GET to load some user profile data, like so -

MainController.js

   $http({
        method: 'GET',
        url: config.serverUrl + '/profile'
    }).then(function successCallback(response) {
        $scope.userdata = response.data.message.user;
    }, function errorCallback(response) {
         toastr.error('Something is wrong.');
    });

Server response

{
    "success": true,
    "message": {
        "user": {
            "id": 36,
            "email": "[email protected]",
            "name": "Rusty Rittenhouse"
        }
    }
}

Now, I'm using the following expression to show the user's name:

{{ userdata.name }} -> inputs "Rusty Rittenhouse"

How can I display only "Rusty"? Usually I would use split, but since I'm new to angular I don't know what's the best and most neat solution for this.

Martijn Welker · Accepted Answer · 2016-02-15 12:51:28Z

1

You can write a custom filter to do this:

angular.module('myApp', []).filter('firstName', function() {
    return function(input) {
        return input.split(' ')[0];
    };
});

and use it like so:

{{ userdata.name | firstName }}

or even better:

<div/span ng-bind="userdata.name | firstName"></div/span>

answered Feb 15, 2016 at 12:51

Martijn Welker

5,6151 gold badge19 silver badges26 bronze badges

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

8 Comments

user3800799 Over a year ago

wow, thanks, its pretty neat. would you say it is right to use a filter in this case?

Martijn Welker Over a year ago

Yes, as long as you don't want to actually modify the original data and it's not a heavy function using a filter is fine, just remember that a filter can run hundreds of times so keep it light

Martijn Welker Over a year ago

Could it be that either userdata or userdata.name is undefined ?

Martijn Welker Over a year ago

You could always add: return input ? input.split(' ')[0] : ' ';

Martijn Welker Over a year ago

It tries to fire the filter before your data is loaded, if you add the code from my last comment you shouldn't have the error anymore

|

Collectives™ on Stack Overflow

AngularJS expression with custom "filter"?

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related