过滤器ng-repeat从对象属性创建以逗号分隔的数组值列表

Question

我试图使用AngularJS (v1.4.8)创建一个逗号分隔的字符串来显示在单个表单元格中，但源是对象数组中的数组属性。类似的问题也被问过，而且到处都是，但到目前为止，没有一个人能把我引向正确的方向。

给定一个简单的对象数组，如:

$scope.activities = [
  {
    name: "leela",
    entries: [{note: 'Lala-A', isInterested: true }, 
              {note: 'Lala-B', isInterested: false}, 
              {note: 'Lala-C', isInterested: true }]
  }, 
  {
    name: "slurms",
    entries: [{note: 'Blah-A', isInterested: false}, 
              {note: 'Blah-B', isInterested: true}, 
              {note: 'Blah-C', isInterested: true}]
  }];

每个对象都有一个名为entries的属性，该属性是一个布尔值isInterested的对象数组。我想创建一个逗号分隔的注释属性列表，但仅适用于isInterested = true;

的条目属性值

例如，根据上面的数据，我想显示以下内容:

---------------------------
|NAME    |ENTRIES         |
===========================
|leela   |Lala-A, Lala-C  |
---------------------------
|slurms  |Blah-B, Blah-C  |
---------------------------

我已经得到了这一点，这确实过滤属性正确，但将它们放在同一行是问题:

<!-- this displays the 'note' on multiple lines -->
<div ng-repeat="activity in activities">
  <div ng-repeat="entry in activity.entries | filter:{isInterested: 'true'}">
    <span>{{entry.note}}</span>
  </div>
</div>
<!-- this displays nothing/zilch -->
<div ng-repeat="activity in activities">
  <div ng-repeat="entry in activity.entries | filter:{isInterested: 'true'}">
    <span>{{entry.note + ($last ? '' : ', ')}}</span>
  </div>
</div>

Answer 1

注释出现在多行上，因为默认情况下div是display:block;，这会占用尽可能多的空间。你可以通过改变条目div的显示来解决这个问题，或者你可以把div改成span，像这样:

<div ng-repeat="activity in activities">
  <span ng-repeat="entry in activity.entries | filter:{isInterested: 'true'}">
    {{entry.note + ($last ? '' : ', ')}}
  </span>
</div>

这可以工作，因为span的默认显示是inline。工作示例:https://jsbin.com/jivoqeqade/edit?html,css,js,output