父 ng-repeat 中的搜索过滤器不起作用

Question

我有一个对象数组，如下所示，我称之为 $scope.parlist。我已经做了一项研究，以便在用户搜索特定帐户但我失败时过滤我的嵌套 ng-repeat

[
   {
      bch: "001",
      loan_product: [
         {
            id_code: "ML1",
            asofmonitoring:[{ //asofmonitoring is fixed to have just one object here
                days07:[
                     {
                       loan_no: "ML-XXX-XXX-XXX",
                       name: "John Papa"
                     },
                     {
                       loan_no: "ML-XXX-XXX-XXX",
                       name: "Grace Papa"
                     }
                     ...
                ],
                days08:[
                     {
                       loan_no: "ML-XXX-XXX-XXX",
                       name: "Earl Papa"
                     },
                     {
                       loan_no: "ML-XXX-XXX-XXX",
                       name: "Britney Papa"
                     }
                     ...
                ]
                ...
            }]
         },
         ...
      ]

   }
   ...
]

html

<tbody data-ng-repeat="par in parlist" ng-init="outerindex = $index">
    <tr>
        <td colspan="15" style="background-color:rgb(233, 236, 239)">
            <table class="table table-sm">
                 <tbody ng-repeat="prod in par.loan_product" ng-init="innerindex = $index">
                      <tr>
                         <table>
                             <tbody ng-if="prod.asofmonitoring[0].days07.length > 0">
                                  <tr>
                                      <td colspan="2" class="text-left table-warning">
                                         <input type="text" ng-model="q7[innerindex]" class="form-control" placeholder="Search account" aria-label="Search account" aria-describedby="basic-addon2">
                                       </td>

                                    </tr>
                               </tbody>
                               <tbody ng-repeat="days07 in prod.asofmonitoring[0].days07 | filter:q7[innerindex]">
                                     <tr>
                                         <td class="text-center" ng-bind="days07.loan_no">loading...</td>
                                     </tr>
                               </tbody>
                          </table>
                       </tr>
                   </tbody>
             </table>
         </td>
      </tr>
</tbody>

我的问题是我无法让搜索过滤器在我的 ng-repeat="days07 in prod.asofmonitoring[0].days07 ng-repeat 中工作。我已经提出了其他建议，例如放置 ng-init="outerindex = $index" 和其他解决方案，但我的 ng-repeat 不会过滤。谁能帮我解决这个问题？

Answer 1

您遇到了与范围相关的绑定问题。

ng-if 和 ng-repeat 都隐式创建了新的作用域。

您没有包含任何控制器代码，但我认为我在合理假设您没有明确定义 q7。因此，当 q7 出现在 ng-if 内时，只有此作用域才能访问绑定模型。 ng-repeat 在兄弟元素上，因此不具有相同的可见性，这就是为什么当您更改文本过滤器模型时没有任何反应。

此处的快速解决方案是在您的控制器中显式初始化 q7 以确保不会发生变量阴影。

在下面为您提供了一个精简示例：

_{编辑：已更新以反映评论。}

angular
  .module('app', [])
  .controller('ctrl', function ($scope) {
    // Explicitly declare text filter model so `ng-repeat` does not create shadowed copies
    $scope.q = {};
    $scope.parlist = [
      {
        bch: '001',
        loan_product: [
          {
            id_code: 'ML1',
            asofmonitoring: [
              {
                days07: [
                  {
                    loan_no: 'ML-XXX-XXX-XXX',
                    name: 'John Papa',
                  },
                  {
                    loan_no: 'ML-XXX-XXX-XXX',
                    name: 'Grace Papa',
                  },
                ],
                days08: [
                  {
                    loan_no: 'ML-XXX-XXX-XXX',
                    name: 'Earl Papa',
                  },
                  {
                    loan_no: 'ML-XXX-XXX-XXX',
                    name: 'Britney Papa',
                  },
                ],
              },
            ],
          },
        ],
      },
      {
        bch: '002',
        loan_product: [
          {
            id_code: 'ML1',
            asofmonitoring: [
              {
                days07: [
                  {
                    loan_no: 'ML-XXX-XXX-XXX',
                    name: 'John Papa',
                  },
                  {
                    loan_no: 'ML-XXX-XXX-XXX',
                    name: 'Grace Papa',
                  },
                ],
                days08: [
                  {
                    loan_no: 'ML-XXX-XXX-XXX',
                    name: 'Earl Papa',
                  },
                  {
                    loan_no: 'ML-XXX-XXX-XXX',
                    name: 'Britney Papa',
                  },
                ],
              },
            ],
          },
        ],
      },
    ];
  });

<div ng-app="app" ng-controller="ctrl">
  <div ng-repeat="par in parlist">
    <div ng-repeat="prod in par.loan_product">
      <div ng-if="prod.asofmonitoring[0].days07.length">
        <input type="text" ng-model="q[par.bch][$index]" placeholder="bch: {{par.bch}}">
      </div>
      <div ng-repeat="days07 in prod.asofmonitoring[0].days07 | filter:q[par.bch][$index]">
        <div ng-bind="days07.loan_no">loading...</div>
      </div>
    </div>
  </div>
  <pre>q = {{ q | json }}</pre>
</div>
<script src="https://unpkg.com/angular@1.7.5/angular.min.js"></script>

父 ng-repeat 中的搜索过滤器不起作用

seach filter inside a parent ng-repeat not working

angularjs

angularjs-ng-repeat

ng-filter