How to iterate over object array in angular but display only property with {{}}?

Question

Suppose we have an object array:

    var items = [
  {
    id: 1,
    name: 'name1'
  }, {
    id: 2,
    name: 'name2'
  },
  {
    id: 3,
    name: 'name3'
  }
];

and we want to iterate over it in HTML using this:

{{ctrl.items}}

expecting this in the UI:

name1, name2, name3

Is this possible? Or do I have to use a ngRepeat for that?

I want to mainly do this to take advantage of the limitTo filter inside the {{}}

your question isn't exactly clear. yes, you would use ng-repeat, and limitTo works perfectly fine in an ng-repeat. — Claies
– Claies, Commented Jul 18, 2015 at 21:22

Ahmed Eid · Accepted Answer · 2015-07-18 21:29:05Z

3

you can use code like this in your HTML

{{ctrl.getNames(ctrl.items)}}

and in your controller add this function

this.getNames = function(items){
     return items.map(function(item){return item.name;}).join(", ");
}

or you can make a filter for this ,,

app.filter("names",function(){
   return function(input){
      return input.map(function(item){return item.name;}).join(", ");
   };
});

and in your HTML use this

{{ctrl.items | names}}

answered Jul 18, 2015 at 21:23

Ahmed Eid

1,1838 silver badges9 bronze badges

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

3 Comments

Simplest solution(s) for including the commas

Would {{ctrl.items | names | limitTo: 2}} be valid?

you should use limitTo filter before names filter so it would be like this {{ctrl.items | limitTo: 2 | names}}

Daniel Cottone · Accepted Answer · 2015-07-18 21:26:02Z

1

You can accomplish this by using both ng-repeat and the limitTo filter:

<div ng-repeat="item in items | limitTo: 3">{{ item.name }}</div>

EDIT:

answered Jul 18, 2015 at 21:26

Daniel Cottone

4,52030 silver badges39 bronze badges

How would you implement the commas in between each item? Without a comma after the last item.