AngularJS多重ng模型過濾器

Question

我有一個表單需要根據用戶在文本框中鍵入的內容或在下拉列表中選擇的內容進行過濾。 直到我嘗試在下拉列表中選擇添加內容時，文本框過濾器才能很好地工作，然后這兩個過濾器都不起作用。 這是我的HTML：

 <div class="row">
            <table class="table" id="results">
                <thead style="background-color:#003A5D; color:white">
                    <tr>
                        <td>Company Name</td>
                        <td>City</td>
                        <td>State</td>
                        <td>Company Type</td>
                        <td>System ID</td>
                        <td>Releast Status</td>
                        <td>Training Tracker</td>
                        <td>SSQ Complete</td>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="contractor in contractors | filter: search ">
                        <td id="companyname">{{contractor.vchCompanyName}}</td>
                        <td id="city">{{contractor.vchOprCity}}</td>
                        <td id="state">{{contractor.vchOprStateID}}</td>
                        <td id="companytype">{{contractor.CompanyType}}</td>
                        <td id="companyid">{{contractor.CompanyID}}</td>
                        <td id="status">{{contractor.ReleaseStatus}}</td>
                        <td>
                            <div ng-switch="contractor.TrainingTracker">
                                <div ng-switch-when="true">
                                    <span style="color:green" ng-bind-html="contractor.TrainingTracker | applyMarks | trustedhtml"></span>
                                </div>
                                <div ng-switch-when="false"><span style="color:red" ng-bind-html="contractor.TrainingTracker | applyMarks | trustedhtml"></span></div>
                            </div>
                        </td>
                        <td>
                            <div ng-switch="contractor.SSQComplete">
                                <div ng-switch-when="true">
                                    <span style="color:green" ng-bind-html="contractor.SSQComplete | applyMarks | trustedhtml"></span>
                                </div>
                                <div ng-switch-when="false"><span style="color:red" ng-bind-html="contractor.SSQComplete | applyMarks | trustedhtml"></span></div>
                            </div>
                        </td>
                    </tr>

                </tbody>

            </table>
        </div>

這是我的Angular Controller中的過濾器代碼：

 $scope.search = function (row) {
        return (angular.lowercase(row.vchCompanyName).indexOf($scope.query || '') !== -1 || angular.lowercase(row.CompanyID).indexOf($scope.query || '') !== -1 || row.CompanyType.indexOF($scope.query2 || '') !== -1);
    };

正如有人建議的那樣，我嘗試了以下自定義過濾器：

app.filter('searchArrayFilter', [function () {
    return function (rows, query, query2) { // your filter take an array, and two query as parameters
        return rows.filter(function (row) {
            return (angular.lowercase(row.vchCompanyName).indexOf(query || '') !== -1 || angular.lowercase(row.CompanyID).indexOf(query || '') !== -1 || row.CompanyType.indexOf(query2 || '') !== -1);
        });
    }
}])

我通過HTML更改為：

                  <tr ng-repeat="contractor in contractors |  searchArrayFilter:query:query2 ">

但是現在，我必須在下拉列表中選擇某些內容，然后在文本框中鍵入一些內容，過濾器才能正常工作。 我發現這很奇怪，因為我使用的是“ ||” 或運算符，但其行為類似於“ &&”。

非常感謝您的協助！

Answer 1

解決方案是創建一個自定義過濾器。 創建過濾器后遇到的問題是過濾器的“邏輯”中。 更改“ ||”后 設為“ &&”，則過濾器可根據需要工作。 “最終”過濾器如下：

app.filter('searchArrayFilter', [function () {
    return function (rows, query, query2) { // your filter take an array, and two query as parameters
        return rows.filter(function (row) {
            return ((angular.lowercase(row.vchCompanyName).indexOf(query || '') !== -1 || angular.lowercase(row.CompanyID).indexOf(query || '') !== -1) && row.CompanyType.indexOf(query2 || '') !== -1);
        });
    }
}])

我希望這對其他人有幫助。 祝你有美好的一天！