Angular.js expression: output transformed object property

Question

I have data like this:

var user = {
  name: 'John Doe',
  property: 'value',
  ranks: [
    {name: 'One', property: 'value'},
    {name: 'Two', property: 'value'}
  ]
}

I want to output somewhere in the page all user's rank names divided by commas, like this:

<td>John Doe</td>
<td>One, Two</td>

How to do this?

Pure javascript isn't working:

<td>{{user.name}}</td>
<td>{{user.ranks.map(function(r) { return r.name }).join(', ')}}</td>

I think here should be an Angular filter or something, but can't find anything.

Sure there will be multiple users, but I want to do this with each user separately. — Envek
– Envek, Commented Jul 25, 2014 at 13:47

ms87 · Accepted Answer · 2014-07-25 08:26:08Z

3

You can't write JS like that in your templates. The angular way would be to use a filter:

app.filter("usersFilter" , function () {
        return function(user) {
           return user.ranks.map(function(r) { return r.name }).join(', ');
        }
}

and in your HTML:

<td>{{ user | usersFilter}}</td>

answered Jul 25, 2014 at 8:26

ms87

17.5k23 gold badges89 silver badges123 bronze badges

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

Comments

Envek · Accepted Answer · 2014-07-25 14:19:32Z

1

Finally I did it so:

Wrote distinct map and join filters with parameters:

app.filter("map", function() {
  return function(collection, attribute) {
    return collection.map(function(object) {
      var attr = object[attribute];
      return (typeof attr === "function") ? attr() : attr;
    });
  }
});

app.filter("join", function() {
  return function(collection, separator) {
    return collection.join(separator);
  }
});

And then in template

<td>{{user.ranks | map:'name' | join:', ' }}</td>

And now it works in a way I wanted.

answered Jul 25, 2014 at 14:19

Envek

4,7743 gold badges37 silver badges44 bronze badges

Collectives™ on Stack Overflow

Angular.js expression: output transformed object property

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related