Angularjs多个ng-Model过滤器

Angularjs Multiple ng-Model filter

本文关键字：过滤器 ng-Model 多个 Angularjs      更新时间：2023-09-26

我有一个表单，我需要根据用户在文本框中输入的内容或他们在下拉列表中选择的内容进行过滤。文本框过滤器工作得很好，直到我尝试添加下拉列表选择，然后两个过滤器都不起作用。这是我的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控制器中的过滤器代码:

 $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 ">

但是现在，我必须在下拉框中选择一些东西，并在文本框中键入一些东西，以便过滤器工作。我发现这很奇怪，因为我使用的是'||'或操作符，但它的行为就像'&&'。

非常感谢任何帮助!

解决方案是创建一个自定义过滤器。我在创建过滤器后遇到的问题是过滤器的"逻辑"。将'||'更改为'&&'后，过滤器按预期工作。"最终"过滤器如下所示:

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

我希望这能帮助到别人。祝你今天愉快!

相关文章：