[英]AngularJS - Hide div when list is empty
I currently have the following : 我目前有以下内容:
<div class="row">
<!-- Banners -->
<h2 class="mt15">Banners</h2>
<div class="col-sm-3 ml5 mt5" ng-repeat="banner in banners" ng-if="!banner.public">
<ul class="rdopts form-group">
<li class="rdopt opt mb10">
<label class="btn btn-danger btn-sm w100pc">
<input type="radio" name="banner_option" autocomplete="off" ng-model="vm.editModel.banner" value="{{banner.file}}" ng-checked="{{banner.file === main_image_css_file}}">{{banner.name}}
</label>
</li>
</ul>
</div>
Currently, I have both public and private banners in the banner list. 目前,横幅列表中同时包含公共横幅和私人横幅。 The
banner.public
property does this distinction. banner.public
属性实现了这一区别。 What I currently need to do is hide the whole div when I don't have any element on the list, given that the list only shows the banners that respect the ng-if="!banner.public"
condition? 我现在需要做的是在列表中没有任何元素的情况下隐藏整个div,因为列表仅显示符合
ng-if="!banner.public"
条件的ng-if="!banner.public"
?
Any idea on how can I do this using Angular? 关于如何使用Angular做到这一点的任何想法?
Clarification: What I want to do is to hide the whole row div when I don't have any element on the list that fills the ng-if="!banner.public" condition. 澄清:我想做的是当列表中没有任何元素可以满足ng-if =“!banner.public”条件时隐藏整个div列。
You should use filter
method for your list
. 您应该对
list
使用filter
方法。
<div class="row" ng-if="verify()">
<!-- Banners -->
<h2 class="mt15">Banners</h2>
<div class="col-sm-3 ml5 mt5" ng-repeat="banner in banners" ng-if="!banner.public">
<ul class="rdopts form-group">
<li class="rdopt opt mb10">
<label class="btn btn-danger btn-sm w100pc">
<input type="radio" name="banner_option" autocomplete="off" ng-model="vm.editModel.banner" value="{{banner.file}}" ng-checked="{{banner.file === main_image_css_file}}">{{banner.name}}
</label>
</li>
</ul>
</div>
JS JS
$scope.verify=function(){
var result=$scope.banners.filter(function(banner){
return banner.public;
});
return result.length!=0;
};
<div class="col-sm-3 ml5 mt5" ng-repeat="banner in banners" ng-hide="banner.public.length == 0">
<ul class="rdopts form-group">
<li class="rdopt opt mb10">
<label class="btn btn-danger btn-sm w100pc">
<input type="radio" name="banner_option" autocomplete="off" ng-model="vm.editModel.banner" value="{{banner.file}}" ng-checked="{{banner.file === main_image_css_file}}">{{banner.name}}
</label>
</li>
</ul>
you can use ng-hide
or ng-show
您可以使用
ng-hide
或ng-show
Try this: 尝试这个:
<div class="col-sm-3 ml5 mt5" ng-repeat="banner in banners" ng-if="banner.public.length!=0">
<ul class="rdopts form-group">
<li class="rdopt opt mb10">
<label class="btn btn-danger btn-sm w100pc">
<input type="radio" name="banner_option" autocomplete="off" ng-model="vm.editModel.banner" value="{{banner.file}}" ng-checked="{{banner.file === main_image_css_file}}">{{banner.name}}
</label>
</li>
</ul>
</div>
ng-if
is appropriate in this case as it will not render the HTML in the view ie, you cannot see the HTML during inspect element. ng-if
在这种情况下是合适的,因为它不会在视图中呈现HTML,即,您不能在inspect元素期间看到HTML。
You just need to check the length of the array with ng-if='banner.public.length'
, if that is available then that will be attached to the DOM otherwise it will be detached: 您只需要使用
ng-if='banner.public.length'
检查数组的长度,如果可用,则将其附加到DOM上,否则将被分离:
var app = angular.module('demoapp',[]); app.controller('demoCtrl', function($scope){ $scope.banners = [{"public":[]}]; });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script> <div ng-app='demoapp'> <div ng-controller='demoCtrl'> demoapp <ul> <li ng-repeat='banner in banners' ng-if='banner.public.length'>{{banner.public}}</li> </ul> </div> </div>
From what I gather, you have a single list of banners. 根据我的收集,您只有一个横幅列表。 A banner can either be public or private.
标语可以是公共的也可以是私人的。 Depending on how you are representing banner in your controller.
取决于您在控制器中表示横幅的方式。 Try the following:
请尝试以下操作:
Assuming banners as: 假设横幅为:
$scope.banners = [{public: true}, {public: false}];
You can have a function in your controller as: 您可以在控制器中具有以下功能:
$scope.hasPublic = (banners) => {
var hasPublic = false;
banners.forEach((banner) => {
if (banner.public === true) hasPublic = true;
});
return hasPublic;
}
<div class="row" ng-if="hasPublic(banners)">
<h2 class="mt15">Banners</h2>
<div class="col-sm-3 ml5 mt5" ng-repeat="banner in banners" ng-if="banner.public">
<!--- Rest of the code here -->
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.