父級ng-repeat內的seach過濾器不起作用

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-repeat="days07 in prod.asofmonitoring[0].days07 。我已經提出了其他建議，例如將ng-init="outerindex = $index"和其他解決方案，但我的ng-repeat不會過濾。有人可以幫我解決這個問題嗎？

Answer 1

您這里遇到了范圍相關的綁定問題。

ng-if和ng-repeat隱式創建新的作用域。

您尚未包含任何控制器代碼，但我想我正在做出一個公平的假設，即您未明確定義q7 。 因此，當q7出現在ng-if內部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>