javascript - Angularjs 多 ng-Model 过滤器

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);
        });
    }
}])

我希望这对其他人有帮助。祝你有美好的一天!