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模型過濾器

回答

相關問題