Question

我有一个带过滤器的嵌套列表，它有日期和活动。

对象看起来像：

days:[ 
{name:"monday", acts[{title:"Zumba",start:"10am",end:"11am"},{}..]}...
]

过滤器工作正常，但是当过滤器返回当天的0活动时，我想隐藏日标题（group.title）。

我找到了一些像这样的答案：AngularJS - hide parent element if children loop is empty (filtered)

试图实施但没有成功。

这是我的代码：

视图

<ion-view view-title="{{titulo}}">
  <ion-content>
      <div class="container-hearder-image" style="background-image: url('{{img}}');" >
    </div>
    <h4>{{titulo}}</h4>
    <p>Seleccione Actividades</p>
      <div ng-repeat="c in colors">
          <ion-checkbox ng-click="includeColour(c)" class="item-bcg waves-effect waves-block waves-light"/> {{c}}
       </div>
    <ion-list ng-repeat="group in detailService.selected.days" >
        <div class="item item-divider bar bar-header bar-calm" >{{group.title}}</div>
        <ion-list ng-repeat="item in group.acts | filter:colourFilter">
          <ion-item >
            <h3>{{item.title}}</h3>
            {{item.start}} - {{item.end}}
          </ion-item>
        </ion-list>      
    </ion-list> 
  </ion-content>
</ion-view>

控制器

.controller('HorarioCtrl', function($scope, $stateParams,detailService) {


    $scope.colors = ['Zumba','Combat','Spinning','HIIT','Pilates','Yoga'];
    $selected = detailService.selected
    $scope.detailService=detailService;
    $scope.titulo = detailService.selected.title;
    $scope.img = detailService.selected.img;
    colourIncludes = [];
    $scope.colourIncludes = colourIncludes

    $scope.includeColour = function(colour) {
        var i = $.inArray(colour, colourIncludes);
        if (i > -1) {
            colourIncludes.splice(i, 1);
        } else {
            colourIncludes.push(colour);
        }
    }

    $scope.colourFilter = function(fruit) {
        if (colourIncludes.length > 0) {
            if ($.inArray(fruit.title, colourIncludes) < 0)
                return;
        }

        return fruit;
    }
});

此致

Answer 1

您可以使用别名表达式，该表达式将在应用过滤器后存储转发器的中间结果。

<div class="item item-divider bar bar-header bar-calm" ng-if="filteredElements.length>0">{{group.title}}</div>
<ion-list ng-repeat="item in group.acts | filter:colourFilter as filteredElements">
 <ion-item >
   <h3>{{item.title}}</h3>
    {{item.start}} - {{item.end}}
  </ion-item>
</ion-list>

Answer 2

正如您上面链接的其他帖子所回答的那样，ngShow可以在这种情况下工作。

<h3 ng-show="item.title != null">{{item.title}}</h3>

Answer 3

如果group.acts.length大于零，则显示标题。否则，不显示

 <ion-list ng-repeat="group in detailService.selected.days" >
        <div ng-if="colourFilter.length>0" class="item item-divider bar bar-header bar-calm" >{{group.title}}</div>
        <ion-list ng-repeat="item in group.acts | filter:colourFilter">
          <ion-item >
            <h3>{{item.title}}</h3>
            {{item.start}} - {{item.end}}
          </ion-item>
        </ion-list>      
    </ion-list>

离子角嵌套ng-repeat过滤器，如果为空则隐藏标题

3 个答案: