AngularJS - 过滤器不会隐藏数据

Question

我有一些复选框和一个用于搜索的输入字段。我到目前为止，复选框过滤和搜索输入都工作，但有一个小问题，我想解决。

复选框：

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

和控制器：

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

现在我有一个<md-card>，里面我有一个<table>，都使用ng-repeat。实际上在<md-card>里面我有3个ng-repeat，但主要是桌子和卡片

这是它的样子：

<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'  | toArray | filter:searchName">

        <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 | filter: searchName | 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-toolbar>或<md-card>消失/隐藏。 TABLE DATA是隐藏的，但不是表或卡本身。所以它看起来像这样：

香港专业教育学院尝试添加ng-show="(account|filter:searchName).length > 0 | customFilter:(technologyArray|filter:{on:true})"但它没有用。（可以在第一行<md-card>标签上找到）

希望有人能帮忙，谢谢！

Answer 1

你需要使用ng-model和ng-show，例如

<input type="checkbox" ng-model="ModelCheckBoxA">
<input type="checkbox" ng-model="ModelCheckBoxB">

<div ng-show="ModelCheckBoxA">
...
</div>

checkbox和ng-show的值是boolean，所以如果ModelCheckBoxA为true，那么你得到ng-show = true。