如何使用 Angular js 在 ng-repeat 中使用过滤器？答案

【问题标题】：How to use filter with in ng-repeat using Angular js?如何使用 Angular js 在 ng-repeat 中使用过滤器？
【发布时间】：2017-09-04 18:28:09
【问题描述】：

我想在ng-repeat 中过滤一些值，我已经尝试过但没有解决方案...

My Plunker.
我正在寻找三种解决方案，

(i) 首先在我的 plunker 中，我希望过滤列表中 parent 的 ng-module="request_role" 值。所以我试过| filter: request_role.[parent']。

(ii) 在我的 plunker 第二个列表中，我希望过滤 ng-module="request_role" 的 Change Agent 值。所以我试过| filter: request_role.['Change Agentent']。

(i) 在我的 plunker 第三个列表中，我希望过滤 ng-module="request_role" 的 parent,Change Agent 值。所以我试过| filter: request_role.['parent,Change Agent']。

我认为我在 filter 中犯了一个错误，所以请检查并更新我的 plunker 以了解确切的解决方案，谢谢...

我的 HTML：-

<p style="background: black;color:white">1.Filter request_role  value of `parent` data's in below list</p>
        <div  ng-repeat="question in users | filter: request_role.['parent']">
            <small>
              <table border="0">
                <tbody>
                  <th>{{question.displayName}}</th>
                <th style="background: yellow;">,{{question.roles[0]}}</th>
                <th style="background: light;">,{{question.request_role[0]}}</th>

                </tbody>
                      </table>


              </small>
        </div>

        <p style="background: black;color:white">2. Filter request_role  value of `Change Agent ` data's in below list</p>
        <div  ng-repeat="question in users | filter: request_role.['Change Agent']">
            <small>
              <table border="0">
                <tbody>
                  <th>{{question.displayName}}</th>
                <th style="background: yellow;">,{{question.roles[0]}}</th>
                <th style="background: light;">,{{question.request_role[0]}}</th>

                </tbody>
                      </table>


              </small>
        </div>

         <p style="background: black;color:white">3.Filter request_role  Both value of ["parent","Change Agent"] data's in below list</p>
        <div  ng-repeat="question in users | filter: request_role.['parent,Change Agent']">
            <small>
              <table border="0">
                <tbody>
                  <th>{{question.displayName}}</th>
                <th style="background: yellow;">,{{question.roles[0]}}</th>
                <th style="background: light;">,{{question.request_role[0]}}</th>

                </tbody>
                      </table>


              </small>
        </div>

我的过滤器：-

  1. | filter: request_role.['parent']

    2.  | filter: request_role.['Change Agent']

3. | filter: request_role.['parent,Change Agent']

My Plunker。

【问题讨论】：

标签： html angularjs meanjs

【解决方案1】：

您可以使用自定义过滤器或直接通过在ng-repeat 上应用过滤器来解决此问题，如下所示

<div ng-repeat="question in users | filter: {'request_role':'parent'}">
<div ng-repeat="question in users | filter: {'request_role':'Change Agent'}">
<div ng-repeat="question in users | filter: {'request_role':'Change Agent','request_role':'parent'}">

打工者：http://plnkr.co/edit/NY3h8BCQn4gAbJsdyiJw?p=preview

【讨论】：

感谢您的回答，您的过滤器在 values like- Change Agent, parent 的基础上完美运行，但我们期望 filter 应该基于 ng-module，而不是一个值。值不是恒定的，我们只是在 plunker 中给出了示例值，所以我们如何根据 ng-module request_role 进行过滤 .... 值不是恒定的，谢谢..非常感谢您的帮助..
我不明白你的要求。你是说 ng-model 吗？
但是你的 ng-model 在上面的 plunker 中在哪里？
plunker 中我们没有提到 ng-model，我只想过滤这个模型 request_role 而不是带值...
我还是不明白你的要求。您不能在不提供值的情况下根据 request_role 过滤某些内容。但是如果你想基于一个像 ng-model="val.request_role" 这样的 ng-model 进行过滤，那么你可以这样做
其中 val.request_role 可以是“父”、“更改代理”等，即对象数组中的 request_role 可以包含的值