ng-repeat 按标题过滤和重复

Question

尝试将我在 angular 应用程序中进行的搜索返回的一组过滤器分开。当我进行搜索时，我收到 json 并按标题分组。我可以只重复那个特定组中的项目并以这种方式分开吗？原因是每个组都在一个独特的 UI 模块中。因此，有些列表将返回并显示在滑块中，有些将显示在收音机中。

这是：

<div heading="{{filter.name}}" 
     ng-repeat="filter in inventory.filters | filterOptions | orderBy:'name'" 
     is-open="true" show-attrs>
  <h3>{{filter.name | uppercase}}</h3>
    <div ng-repeat="option in filter.options">
      <span ng-click="selectedFilter(filter, option.option, option.id)">
      <a>{{option.option}}{{option.count>0 ? "("+option.count +")": ""}}</a>
      </span>
      <br/>
  </div>
</div>

所以最终我希望能够针对 filter.name.color 并且当它是这个特定的组时让它显示在这种特定类型的 UI.

欢迎提供任何建议或阅读材料链接。

Answer 1

好的，所以我尝试的是这个，它似乎让我可以控制我展示的内容和位置：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div heading="{{filter.name}}" 
     ng-repeat="filter in inventory.filters | filterOptions | orderBy:'name'" 
     is-open="true" show-attrs>
  <div ng-if="filter.name=='blah'" >
    <h3>{{filter.name | uppercase}}</h3>
    <div ng-repeat="option in filter.options">
      <span ng-click="selectedFilter(filter, option.option, option.id)"><a>{{option.option}}{{option.count>0 ? "("+option.count +")": ""}}</a></span>
      <br/>
    </div>
  </div>
  <!--Then I just repeat each ng-if that I want to be available -->
</div>

所以基本上在 div 中的 ng-repeat 调用之后，我正在调用 nf-if 并针对特定的过滤器标题 name/id 以仅获取我需要做的事情.

Answer 2

因此，根据您发布的答案，您似乎只想显示具有特定名称的过滤器。如果是这样，ngFilter 应该能够像这样处理：

| filter:{name: 'blah'}

（或 {name: something} 如果值在名为 something 的变量中）

完整 HTML:

<div heading="{{filter.name}}" 
     ng-repeat="filter in inventory.filters | filterOptions | orderBy:'name' | filter:{name:'blah'}" 
     is-open="true" show-attrs>
  <h3>{{filter.name | uppercase}}</h3>
  <div ng-repeat="option in filter.options">
    <span ng-click="selectedFilter(filter, option.option, option.id)"><a>{{option.option}}{{option.count>0 ? "("+option.count +")": ""}}</a></span>
    <br/>
  </div>
  <!--Then I just repeat each ng-if that I want to be available -->
</div>

如果你想根据 filter.name.color 进行过滤，你可以使用 | filter:{name.color: 'blue'}，但如果对象符号中的那个点不适合你，另一种选择是使用自定义过滤函数：

| filter:hasColor.bind(null, 'blue')

然后在你的控制器中：

$scope.hasColor = function (color, filter) {
    return filter.name && filter.name.color === color;
};

ng-repeat 按标题过滤和重复

ng-repeat filter and repeat by heading

angularjs

angularjs-ng-repeat

angular-filters