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过滤器不起作用

1 个答案: