В настоящее время у меня есть следующее:

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

Пояснение: что я хочу сделать, это скрыть всю строку div, когда у меня нет элемента в списке, который удовлетворяет условию ng-if = "! Banner.public".

2
Cláudio Ribeiro 9 Янв 2017 в 13:36

5 ответов

Лучший ответ

Вы должны использовать метод 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;
};
2
Mihai Alexandru-Ionut 9 Янв 2017 в 11:41

Вам просто нужно проверить длину массива с помощью 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>
0
Jai 9 Янв 2017 в 10:49

Попробуй это:

<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 во время проверки элемента.

0
Bharatsing Parmar 9 Янв 2017 в 10:41
<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

0
Atul Sharma 9 Янв 2017 в 10:41

Из того, что я понял, у вас есть один список баннеров. Баннер может быть публичным или частным. В зависимости от того, как вы представляете баннер в вашем контроллере. Попробуйте следующее:

Принимая баннеры как:

$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>
-2
Alec BW 9 Янв 2017 в 11:31