javascript - 过滤 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 的属性，它是具有 bool 值 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 更改为跨度，如下所示:

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

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