angularjs - AngularJS 仅显示某些类别
问题描述
我认为这是一个长镜头,但希望有人可以帮助我,下面是我认为获得所有类别的部分,但我只想显示某些类别而不是显示所有类别。在图像中,我有完整的类别,但我希望材料部分不出现,但在后台仍然具有搜索功能。`[输入代码
<div class="ng-cloak" ng-app="angularDemo" ng-cloak="">
<div ng-controller="angularController as ctrl">
<div class="hidden-xs" id="filter_desktop" layout="row">
<div class="container">
<div class="col-sm-2" style="padding-left: 0px;margin-left: -47px;margin-right: 46px;">
<div class="filter" style="color: #999;font-weight: 100;font-size: 120%;margin-right: -60px;"><span>FILTER YOUR SEARCH</span></div>
<div class="resetFilter">
<center class="text-left" style="color: #999;"><button id="resetFilter" onclick="window.location.href='" type="button"><img alt="" src="/Data/Sites/1/media/collection/reset-icon-614x460.png" style="height: 30px!important;" />RESET FILTERS</button></center>
</div>
<div class="sidebar" style="border-top: 1px solid #c1c1c1;">
<div ng-repeat="filter in Filters" style="border-bottom: 1px solid #c1c1c1;">
<div class="col-sm-1" style="margin-right: -30px;"><button ng-click="filter.expanded = false" ng-if="filter.expanded" style="margin-left: 140px; background-color: transparent;border: none;font-size: 25px;margin-top: -34px;">+</button><button ng-click="filter.expanded = true" ng-if="!filter.expanded"
style="margin-left: 140px;background-color: transparent;border: none;font-size: 45px;margin-top: -34px;">-</button></div>
<h3 class="sort" style="font-size: 18px;font-weight: 100;text-transform: uppercase;margin-bottom: 15px;">{{filter.name}}</h3>
<div class="sortoptions" style="margin-bottom: 15px;">
<div data-hidden-checkbox="{{ filter.name == 'family'}}" ng-if="!filter.expanded" ng-repeat="option in filter.options | orderBy: 'value'" style="line-height: 1.6;"><input id="{{option.value}}" ng-checked="option.IsIncluded" ng-model="option.IsIncluded" style="margin-bottom: -1px!important;" type="checkbox" /> <label for="{{option.value}}">{{option.value}}</label></div>
</div>
</div>
</div>
</div>
这里] 1`
解决方案
在您的 Codepen 示例中,只需添加
ng-if="filter.name !== 'color'"
在其中循环过滤器列表 ( ng-repeat
)。如果过滤器的名称不是color,这只会呈现 div 。
这是更新的 Codepen。
推荐阅读
- python - 线被 matplotlib 的曲面图遮挡
- ruamel.yaml - 解析带有冒号的标量的列表时出现 ScannerError
- azure - 如何将 azure cli list 命令的值放入变量中?
- python - 是否有与 dropwizard 指标等效的 python?
- php - PhpOffice\PhpSpreadsheet 从 excel 错误字符集中导入 mysql
- css - CSS 媒体无法在一组设备上运行
- asp.net - 在没有 Internet 连接的 Web 服务器上启用 Azure AD SSO
- runtime-error - 在 Applescript 中处理 InDesign 文档时出错
- audio - 如何使用 ffmpeg 中的 libavcodec 将 opus 文件解码为 pcm 文件?
- python - 硒等到颜色变化