[英]AngularJS - Hide div when list is empty
我目前有以下內容:
<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>
目前,橫幅列表中同時包含公共橫幅和私人橫幅。 banner.public
屬性實現了這一區別。 我現在需要做的是在列表中沒有任何元素的情況下隱藏整個div,因為列表僅顯示符合ng-if="!banner.public"
條件的ng-if="!banner.public"
?
關於如何使用Angular做到這一點的任何想法?
澄清:我想做的是當列表中沒有任何元素可以滿足ng-if =“!banner.public”條件時隱藏整個div列。
您應該對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
$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>
您可以使用ng-hide
或ng-show
嘗試這個:
<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
在這種情況下是合適的,因為它不會在視圖中呈現HTML,即,您不能在inspect元素期間看到HTML。
您只需要使用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>
根據我的收集,您只有一個橫幅列表。 標語可以是公共的也可以是私人的。 取決於您在控制器中表示橫幅的方式。 請嘗試以下操作:
假設橫幅為:
$scope.banners = [{public: true}, {public: false}];
您可以在控制器中具有以下功能:
$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.