mercredi 3 janvier 2018

AngularJS Custom checkbox filter

Ive been trying to add some checkboxes to filter out my <md-card> and <md-table> that populate data on ng-repeat.

This is what my checkbox looks like:

<ul>
    <li ng-repeat="tech in technologyArray">
        <label>
            <input type="checkbox" ng-model="tech.on">
        </label>
    </li>
</ul>

This is what my custom filter looks like:

$scope.technologyArray = [{
                containerId: "7519183",
                on: false
            }, {
                containerId: "8031029",
                on: false
            }];

 .filter('customFilter', function() {
    return function(input, techs) {

        if(!techs || techs.length === 0) return input;
        var out = [];
        angular.forEach(input, function(item) {
            angular.forEach(techs, function(tech) {

                if (item[0].containerId === tech.containerId) {
                    out.push(item);
                }
            });
        });
        return out;
    }

And this is my JSON:

 {
    "1": {
        "accountId": "17467569***",
        "containerId": "7519***3",
        "usageContext": ["web"],
        "tag": 1,
        "trigger": 1,
        "variable": 4,
        "account_name": "Account2"
    },
    "2": {
        "accountId": "***",
        "containerId": "***",
        "usageContext": ["web"],
        "account_name": "Account2",
        "missing_live": true
    },
    "3": {
        "accountId": "***",
        "containerId": "***",
        "usageContext": ["web"],
        "tag": 2,
        "trigger": 1,
        "variable": 1,
        "account_name": "Account 1"
    },
    "4": {
        "accountId": "***",
        "containerId": "***",
        "usageContext": ["web"],
        "tag": 0,
        "trigger": 0,
        "variable": 1,
        "account_name": "GTMdocx"
    },
    "5": {
        "accountId": "***",
        "containerId": "***",
        "usageContext": ["web"],
        "account_name": "GTMdocx",
        "missing_live": true
    },
    "6": {
        "accountId": "21281***2",
        "containerId": "8038***",
        "usageContext": ["web"],
        "tag": 0,
        "trigger": 0,
        "variable": 0,
        "account_name": "Account3"
    }
}

Also this line in my custom filter is not right, because i have to add item[0] wich is not right because inside item we have multiple lines of JSON objects:

 if (item[0].containerId === tech.containerId) {
                    out.push(item);
                }

Hope someone could help me, thanks!

This is my NG-repeat of <md-card> and <table> if needed:

 <md-card flex="45" flex-sm="100" flex-md="100" flex-xs="100" ng-show="(account|filter:searchName).length > 0"
             ng-repeat="account in containers | groupBy: 'accountId'  | filterBy: ['name', 'account_name']: searchName.name| filterBy: ['name', 'account_name']: searchName.account_name| toArray | customFilter:(technologyArray|filter:{on:true})  track by $index">

        <md-toolbar>
            <div class="md-toolbar-tools" ng-repeat="container in account | limitTo: 1">
                <h1 class="md-display-3"> <a href=""></a></h1>
            </div>
        </md-toolbar>

        <md-card-title>
            <table class="table">
                <thead>
                <tr>
                    <th>Container Name</th>
                    <th>Account ID</th>
                    <th>Container ID</th>
                    <th>Options</th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="container in account | filterBy: ['name', 'account_name']: searchName.name| filterBy: ['name', 'account_name']: searchName.account_name | toArray | customFilter:(technologyArray|filter:{on:true})  track by $index">

                    <td ng-if="!container.missing_live"><a href="/gui/tags/"></a></td>
                    <td ng-if="container.missing_live">
                        <md-tooltip md-visible="container.missing_container" md-direction="top">Missing Live Container
                        </md-tooltip>
                        <ng-md-icon icon="warning" size="20" style="fill: #ffd600"></ng-md-icon>
                    </td>
                    <td></td>
                    <td></td>

                    <td>
                        <md-menu>
                            <md-button aria-label="Open phone interactions menu" class="md-icon-button"
                                       ng-click="openMenu($mdMenu, $event)">
                                <ng-md-icon icon="more_vert"></ng-md-icon>
                            </md-button>
                            <md-menu-content width="4">

                                <md-divider>
                                    <md-menu-item>

                                        <md-button ng-init="item.isfavorite = false;"
                                                   ng-class="{yellow : item.isfavorite}"
                                                   ng-click="item.isfavorite =!item.isfavorite; AddFavorite(item.isfavorite,container.containerId)"
                                                   class="md-icon-button md-accent md-warn" aria-label="Favorite">
                                            <ng-md-icon icon="favorite" ng-init="item.isfavorite = false;"></ng-md-icon>
                                        </md-button>

                                        <p ng-if="item.isfavorite">Remove from favorites</p>
                                        <p ng-if="!item.isfavorite">Add to favorite</p>

                                    </md-menu-item>




                                        <md-menu-item>

                                            <md-button ng-init="item.isHidden = false;"
                                                       ng-class="{zebbi : item.isHidden}"
                                                       ng-click="item.isHidden =!item.isHidden; Hidecontainer(item.isHidden, container.containerId);"
                                                       class="md-icon-button md-accent md-warn" aria-label="Hide">
                                                <ng-md-icon ng-if="!item.isHidden" icon="remove_red_eye"></ng-md-icon>
                                                <ng-md-icon ng-if="item.isHidden" icon="panorama_fisheye"></ng-md-icon>
                                            </md-button>

                                            <p ng-if="item.isHidden">Hidden</p>
                                            <p ng-if="!item.isHidden">Hide</p>

                                        </md-menu-item>



                                        <md-menu-item>
                                            <md-button>
                                                <ng-md-icon icon="more_vert"></ng-md-icon>
                                                whaat
                                            </md-button>
                                        </md-menu-item>
                            </md-menu-content>
                        </md-menu>
                    </td>

                </tr>
                <tr ng-if="!containers" colspan="4">
                    <td>No Variables found</td>
                </tr>
                </tbody>
            </table>
        </md-card-title>
    </md-card>




Aucun commentaire:

Enregistrer un commentaire