AngularJS - 隐藏DIV当列表为空

Question

目前，我有以下几点：

<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"条件的横幅吗？

任何想法，我该如何使用Angular做到这一点？

澄清：当我在列表中没有任何填充ng-if =“！banner.public”条件的元素时，我想要做的是隐藏整行div。

Answer 1

您应该使用filter方法为您的list。

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

Answer 2

<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

Answer 3

试试这个：

<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，即，在检查元素期间无法看到HTML。

Answer 4

你只需要检查数组的长度与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>

Answer 5

从什么我收集，你有一个单一的横幅列表。横幅可以是公共或私人的。取决于您在控制器中如何代表横幅。请尝试以下操作：

假设横幅为：

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