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>