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 的对象数组。我想创建一个逗号分隔的note属性列表，但仅限于 isInterested = true ;

的entries属性的值。

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

---------------------------
|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的默认显示为inline。工作示例：https://jsbin.com/jivoqeqade/edit?html,css,js,output

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

1 个答案: