靈活的過濾器

我有一個重複的HTML代碼，以非常小的變化）。該HTML的和平只是顯示了在表JSON對象如下：靈活的過濾器

<thead> 
<tr> 
    <th>Employee</th> 
    <th>Start date</th> 
    <th>End date</th> 
    <th>status</th> 
    <th>Select</th> 
</tr> 
</thead> 
<tbody> 
<tr ng-repeat="oneRecord in currentEmployeeData.RecordsOfJSONS|filter : {status: 'pending'}"> 
    <td>{{oneRecord.employee.personalInfo.firstName + ' ' + oneRecord.employee.personalInfo.lastName}}</td> 
    <td>{{oneRecord.startDate}}</td> 
    <td>{{oneRecord.endDate}}</td> 
    <td>{{oneRecord.status}}</td> 
    <td> 
     <div ng-if="oneRecord.status === 'created' "> 
      <cs-checkbox ng-model="oneRecord" 
         ng-click="collectRequests(oneRecord)"></cs-checkbox> 
     </div> 
    </td> 
</tr> 
</tbody> 
</table>

有在這裏兩個重要的方面：

1）過濾記錄：有時候我想通過JSON對象的'status'字段進行過濾。因爲它在這個例子中是可見的，並且有時由其他字段例如'startDate'。

2）該表的最後一列顯示了一個基於「狀態」字段值的複選框。在這種情況下，如果'status === created'，那麼顯示覆選框。在其他情況下，複選框應顯示基於狀態字段的另一個值。

由於幾乎相同的模式正在重演桌子上，我決定用AngularJS如下的指令可能實現它：

m.directive("csHolidayTable", [function() { 
     return { 
      restrict: "E", 
      scope: { 
       JSONrecords: "=", 
       filtervalue: "=", 
       filterparameter : "=", 
       checkboxcondition: "=" 
      }, 

      template:'<table class="cs-table-01">' + 
      '<thead> <tr> + 
      '<th>Employee</th>' + 
      '<th>Start date</th>' + 
      '<th>End date</th>' + 
      '<th>Status</th>' + 
      '<th>Select</th>' + 
      ' </tr> </thead> ' + 
      '<tbody> <tr ng-repeat="oneRecord in holidays|filter : { filterparameter : filtervalue }">' + 
      '<td>{{oneRecord.employee.personalInfo.firstName + " " + oneRecord.employee.personalInfo.lastName}}</td> ' + 
      '<td>{{oneRecord.startDate}}</td> ' + 
      '<td>{{oneRecord.endDate}}</td>' + 
      '<td>{{oneRecord.status}}</td> '+ 
      '<td> <div ng-if="oneRecord.status === checkboxcondition"><cs-checkbox ng-model="oneRecord" ng-click="collectRequests(oneRecord)"></cs-checkbox> </div> </td> </tr></tbody></table>', 

      controller : function ($scope) { 
       //this part implements checkbox functionality. 
       var firstVal = null; 
       var secondVal = null; 
       var counter = 0; 
       multipleRequests = []; 
       $scope.collectRequests = function (oneRequest) { 
        counter = counter + 1; 
        if (counter == 1) { 
         firstVal = oneRequest; 
        } else if (counter == 2) { 
         secondVal = oneRequest; 
         if (secondVal === true) { 
          multipleRequests.push(firstVal); 
          counter = 0; 
         } else { 
          multipleRequests.pop(firstVal); 
          counter = 0; 
         } 
        } 
       } 
      } 
     }; 
    }]);

然後在我的HTML代碼，我只是用這個自定義HTML代碼如下：

<cs-holiday-table JSONrecords="currentEmployeeData.RecordsOfJSONS" checkboxcondition = "'pending'" filterparameter="'status'" filtervalue="'created'"></cs-holiday-table>

或別的地方：

<cs-holiday-table JSONrecords="currentEmployeeData.RecordsOfJSONS" checkboxcondition = "'created'" filterparameter="'startDate'" filtervalue="'2015-01-02'"></cs-holiday-table>

現在問題：複選框顯示正確，可能是因爲它只是指令的HTML模板部分中的ng-if條件。但過濾器不起作用。我不明白爲什麼。
我也用這條線指示defenition，仍然沒有結果：

<tr ng-repeat="oneRecord in holidays|filter : { {{filterparameter}} : filtervalue }">

任何人有知道如何才能實現這種類型的「靈活的過濾」的？這兩個JSON字段及其所需值都從HTML傳遞到指令。如果有詳細的解決方案，我將不勝感激。

來源

2016-10-21 Danial

什麼是你過濾器的名字嗎？ – Makoto

「過濾器名稱」是什麼意思？它根據具體情況而定。正如我所解釋的，取決於情況，我希望可以自由選擇JSON對象中可用的任何字段。這個問題。如果我在Directive定義的HTML模板中使用'fixed'字段，它將起作用。 – Danial

例如這一個工作： – Danial

我認爲這是因爲在AngularJS中「filterparameter」不會被「startDate」或「status」覆蓋。 ~~除此之外，您可以嘗試在過濾器中使用2個參數：一個用於名稱，另一個用於您的值。~~

~~順便說一下，您還可以使用瀏覽器開發工具在篩選器中添加斷點以評估傳遞的值。這樣你可以檢查filterparameter是否被覆蓋。~~

編輯： 你通過2個值的指令和NG-重複使用它。改變你的指令，像「filterconditions」單個屬性，並設置一個JSON格式如下<cs-holiday-table JSONrecords="currentEmployeeData.RecordsOfJSONS" checkboxcondition = "'created'" filterconditions="{ 'startDate' : '2015-01-02' }"></cs-holiday-table>

，並在指令中使用如： <tr ng-repeat="oneRecord in holidays | filter : filterconditions">

這樣你也能基於像多個值來設定條件 {'status'：'created'，'startDate'：'2015-01-02'}或單個值，如{'status'：'created'}或{'startDate'：'2015-01-02'}

https://embed.plnkr.co/nyLl6w9iBwgWDvTUbN7p/

我希望這有助於。

來源

2016-10-22 07:20:42 hakany

對硬編碼的JSON字段（如「startDate」或「status」）使用兩個過濾器不能解決問題。問題是從HTML代碼發送filterparameter和它的期望值。否則，每次我想使用不同的JSON字段時，我都需要繼續添加硬編碼字段。即使我也嘗試使用兩個過濾器，但它不起作用。下一個答案說明試圖使用兩個過濾器。 – Danial

我認爲下一個代碼示例將顯示我的實際意思：https://embed.plnkr.co/YU9yHcblJds1bT2VKdDZ/ – hakany

我想複雜。我已經更新了我的答案 – hakany

我試圖在指令中使用兩個過濾器，但都沒有成功。

<tr ng-repeat="oneRecord in holidays|filter : { status : filtervalue}|filter : { startDate : filtervalue}">

或者這一個：

<tr ng-repeat="oneRecord in holidays|filter : { status : filtervalue}|{ startDate : filtervalue}">

或

<tr ng-repeat="oneRecord in holidays|filter : { status : filtervalue| startDate : filtervalue}">

來源

2016-10-26 09:57:56 Danial

靈活的過濾器

回答

相關問題