Javascript AngularJS-列表为空时隐藏div

我目前有以下情况：

<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.name}

目前，我在横幅列表中有公共和私人横幅。

banner.public

属性实现了这一区别。当前我需要做的是在列表中没有任何元素时隐藏整个div，因为列表中只显示符合

ng if=“！banner.public”

条件的横幅

你知道我怎么用Angular做这个吗

---

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

您应该对

列表使用
筛选
方法

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




{{banner.name}



您可以使用
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>




{{banner.name}



ng if
在这种情况下是合适的，因为它不会在视图中呈现HTML，也就是说，你在检查元素时看不到HTML。
你只需要用
ng if='banner.public.length'
检查数组的长度，如果可用，那么它将附加到DOM，否则它将被分离：


var-app=angular.module（'demoapp'，[]）；
应用程序控制器（'demoCtrl'，函数（$scope）{
$scope.banners=[{“public”：[]}]；
});

demoapp

{{banner.public}

根据我收集的信息，您有一个横幅列表。横幅可以是公共的，也可以是私人的。取决于您在控制器中表示横幅的方式。请尝试以下操作：

假设横幅为：

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

$scope.hasPublic=（横幅）=>{
var hasPublic=false；
横幅。forEach（（横幅）=>{
如果（banner.public==true）hasPublic=true；
});
回归公众；
}
横幅
为什么不能对
ng if
执行相同的操作？我始终建议使用ng if，因为它不会在视图中呈现HTML。此解决方案的唯一问题是仍然显示其上方的h2。我想隐藏整个“行”分区@CláudioRibeiro，我编辑了我的答案。现在请看一看。
ng if=“banner”
试试这个。我会在几分钟内提供一个解决方案。查看我的否决答案，添加一个更新。如果在行上，则使用ngdiv@ClaudioRibeiro，它正在工作？仍在进行一些测试。当一切顺利时将批准。我建议使用ng-if，因为ng-show或ng-hide更干净。为什么要同时使用ng-if和ng-show。这有什么意义？在发帖前回顾一下你的答案。
$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>