Angularjs多ng模型过滤器

我有一个表单，我需要根据用户在文本框中键入的内容或他们在下拉列表中选择的内容进行过滤。文本框过滤器很好，直到我尝试添加下拉列表选择，那么这两个过滤器都不起作用。这是我的HTML：Angularjs多ng模型过滤器

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

这里是过滤器的代码在我的角度控制器：

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

但是现在，我必须在下拉列表中选择一些内容，并在文本框中键入某些内容以使过滤器正常工作。我发现这很奇怪，因为我正在使用'||'或操作员，但其行为如同'& &'。

任何援助非常感谢！

来源

2015-08-26 Rani Radcliff

您应该使用自定义过滤器。检查此更多信息：http://toddmotto.com/everything-about-custom-filters-in-angular-js/ –

@ swordf1zh你认为'searchArrayFilter'是什么？这是一个自定义过滤器 – charlietfl

当我发布我的评论时，你没有使用自定义过滤器.. –

解决方案是创建一个自定义过滤器。我在创建过滤器后遇到的问题是过滤器的“逻辑”。在改变'||'到'& &'，过滤器按需要工作。 “最终”过滤器如下：

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

我希望这可以帮助别人。祝你有美好的一天！

来源

2015-08-26 16:49:09

Angularjs多ng模型过滤器

回答

相关问题