如何以角度迭代对象数组但仅显示带有{{}}的属性？答案

【问题标题】：How to iterate over object array in angular but display only property with {{}}?如何以角度迭代对象数组但仅显示带有{{}}的属性？
【发布时间】：2015-07-18 21:16:45
【问题描述】：

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

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

我们想在 HTML 中使用它来迭代它：

{{ctrl.items}}

在 UI 中期待这个：

name1, name2, name3

这可能吗？还是我必须为此使用 ngRepeat？

我想这样做主要是为了利用 {{}} 中的 limitTo 过滤器

【问题讨论】：

您的问题并不完全清楚。是的，你会使用ng-repeat，而limitTo 在ng-repeat 中工作得非常好。

标签： javascript arrays json angularjs angularjs-directive

【解决方案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}}

【讨论】：

包含逗号的最简单解决方案
会{{ctrl.items |姓名 | limitTo: 2}} 是否有效？
您应该在名称过滤器之前使用limitTo过滤器，这样它就会像这样{{ctrl.items |限制到：2 |姓名}}

【解决方案2】：

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

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

编辑：

Here is a working plunkr.

【讨论】：

你将如何在每个项目之间实现逗号？最后一项后没有逗号。