javascript - 如何从 ng-repeat 获得合并结果？

Question

参见 this plunker .

<div ng-repeat="subCategory in subCategorys | filter:{tags:tag}:true | orderBy:'id'">
      {{subCategory.id}} {{subCategory.name}} {{subCategory.tags}}
      <br/><br/>
      You are now seeing details of <span ng-init="subCats = subCats + ' '  + subCategory.name">{{subCats}}</span>
    </div> 

此 HTML 页面显示对象的过滤结果。但是，我想在“您现在看到的详细信息”之后显示名称的综合结果，例如“您现在看到的是 jim tom 的详细信息”。此合并列表应出现在具有 ng-repeat 指令的元素之后。

如何做到这一点？

谢谢

Answer 1

我做了一个 updated plunker给你。

请尝试使您的示例 plunker 方式在未来更简化为特定问题，因为这有助于我们帮助您。

首先我将搜索绑定(bind)作为过滤器添加到 ng-repeat 以使过滤器可用:

<div ng-repeat="subCategory in subCategorys | filter:{tags:tag}:true | filter:{id:search} | orderBy:'id'">

为了避免执行过滤器两次，您可以通过简单地分配它(在我的示例中为 subCategorysFilter)将过滤器结果直接保存到范围变量中:

<div ng-repeat="subCategory in subCategorysFilter = (subCategorys | filter:{tags:tag}:true | filter:{id:search} | orderBy:'id')">

我进一步改变了你的getAllFilteredNames()方法将过滤器对象作为参数并使其循环遍历结果，构建名称数组并将它们与 , 连接起来。作为分离:

  $scope.getAllFilteredNames = function(filter){
    var names = [];
    angular.forEach(filter, function(element){
      names.push(element.name);
    });
    return names.join(", ");
  };

现在在 ng-repeat 指令之外调用:

You are now seeing details of {{getAllFilteredNames(subCategorysFilter)}}

玩得开心!

---

更新

获得多行输出的两种可能的解决方案:

1 - 你可以换行

<div>You are now seeing details of {{getAllFilteredNames(subCategorysFilter)}}</div>

到

<div>You are now seeing details of <span ng-bind-html="getAllFilteredNames(subCategorysFilter)"></span></div>

然后表达式中的任何 html 标记都被编译为 html 代码。但是 Angular 在默认情况下禁用此功能是有一些有意义的原因的。如果您的对象可由用户编辑，您需要通过转义所有 html 标签来防止他们破坏您的设计...

2 - 但是如果您不需要在单个字符串中显示联合信息，您可以简单地使用另一个 ng-repeat 结合 <ul>像这样:

<div>You are now seeing details of <br/>
  <ul>
    <li ng-repeat="subCategory in subCategorysFilter">{{subCategoryName}}</li>
  </ul>
</div>

只需设计您的 li相应地显示在彼此下方，您就可以开始了。