lundi 13 mai 2019

How to filter a table for null values using multiple checkboxes

I have a list of values fetched from a http get request to an api endpoint and have formatted it to display inside a table using ng-repeat. (This project uses Angular1.5). I'm trying to filter the table using checkboxes, based on whether a specific column has a null value.

For now, I'm trying to make it work using the defined amazonstoreFilter. Currently, this function when checked displays all the data, or displays none of it when unchecked.

When I manually, insert the return of this function into the filter, it works as intended, but I need multiple filters, one for each of the '*ExpireDate' columns

HTML Snippet

<span ng-repeat="storeName in stores">
    <input type="checkbox" ng-model="storeFilter[storeName.name]">
</span>

<tr class="userReportElement" ng-repeat="i in list.content
    | filter:{$: tableSearch} | filter: amazonstoreFilter track by $index" ng-class="{locked: i.locked==true}"  >
        <td>
            
        </td>
        <td>
            
        </td>
        <td>
            <span class="oneline"></span>
        </td>
        <td>
            <span class="oneline"></span>
        </td>
        <td>
            
        </td>
        <td>
            <span class="oneline"></span>
        </td>
        <td>
            <span class="oneline"></span>
        </td>
        <td>
            <span class="oneline"></span>
        </td>
        <td>
            <span class="oneline"></span>
        </td>
        </div>
</table>

Angular

$scope.storeFilter = {
            'amazonExpireDate': false,
            'playstoreExpireDate': false,
            'appleExpireDate': false,
            'webstoreExpireDate': false
          };

    $scope.stores = [
        {name:'amazonExpireDate', filterLabel:'Amazon Users'}, 
        {name:'appleExpireDate', filterLabel:'Apple Users'}, 
        {name:'playstoreExpireDate', filterLabel:'Playstore Users'},
        {name:'webstoreExpireDate', filterLabel:'Webstore Users'}
        ];

          //filters
    $scope.amazonstoreFilter = function(i) {
        if ($scope.storeFilter.amazonExpireDate) {
            return {'amazonExpireDate': ''};
        }           
    };

    $scope.playstoreFilter = function() {
        if ($scope.storeFilter.playstoreExpireDate) {
            return {playstoreExpireDate: ''};
        }
    };

When the checkboxes are true, the table should be filtered accordingly. If two or more checkboxes are true, then the records containing values for at least one of those columns should be displayed.




Aucun commentaire:

Enregistrer un commentaire