Angularjs Multiple ng-Model过滤器

时间:2015-08-26 15:45:23

标签: javascript angularjs

我有一个表单,我需要根据用户在文本框中输入的内容或在下拉列表中选择的内容进行过滤。文本框过滤器工作正常,直到我尝试添加下拉列表选择,然后两个过滤器都不起作用。这是我的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 ">

但是现在,我必须在下拉列表中选择一些内容并在文本框中键入内容以使过滤器正常工作。我发现这很奇怪,因为我正在使用&#39; ||&#39;或者操作员,但它表现得像&#39;&amp;&amp;&#39;。

非常感谢任何帮助!

0 个答案:

没有答案