如何在角度中迭代对象数组但仅显示{{}}的属性？

Question

假设我们有一个对象数组：

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

我们想用HTML迭代它：

{{ctrl.items}}

在UI中期待这一点：

name1, name2, name3

这可能吗？或者我必须使用ngRepeat吗？

我想主要这样做是为了利用{{}}

中的limitTo过滤器

Answer 1

您可以在HTML中使用这样的代码

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

并在您的控制器中添加此功能

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

或者您可以为此制作过滤器，

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

并在您的HTML中使用此

{{ctrl.items | names}}

Answer 2

您可以使用ng-repeat和limitTo过滤器完成此操作：

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

修改：

Here is a working plunkr.