AngularJS Custom复选框过滤器

时间:2018-01-03 13:15:41

标签: javascript angularjs json checkbox

我一直在尝试添加一些复选框,以过滤掉<md-card>上填充数据的<md-table>ng-repeat

这是我的复选框:

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

这是我的自定义过滤器的样子:

$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;
    }

这是我的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"
    }
}

我的自定义过滤器中的这一行也不对,因为我必须添加item[0]这是不对的,因为在项目中我们有多行JSON对象:

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

希望有人可以帮助我,谢谢!

如果需要,这是<md-card><table>的NG重复:

 <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="{{container.tagManagerUrl}}">{{container.account_name}}</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/{{container.path}}">{{container.name}}</a></td>
                    <td ng-if="container.missing_live">{{container.name}}
                        <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>{{ container.accountId }}</td>
                    <td>{{ container.containerId }}</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>




修改 我得到它工作(部分),检查评论和图像,看看问题:( <md-card><md-table>没有隐藏) enter image description here

0 个答案:

没有答案