使用Angularjs过滤分组内容时隐藏分组标题答案

【问题标题】：Hiding the grouping header when filtering grouped contents with Angularjs使用Angularjs过滤分组内容时隐藏分组标题
【发布时间】：2014-09-12 10:10:42
【问题描述】：

我有一个按日期分组的内容分组列表：

2014/7/21

100: 2014/7/21 05:30

101: 2014/7/21 05:30

2014/7/22

102: 2014/7/22 05:30

103: 2014/7/22 05:30

104: 2014/7/22 05:30

2014/7/23

105: 2014/7/23 05:30

106: 2014/7/23 05:30

107: 2014/7/23 05:30

2014/7/24

108: 2014/7/24 05:30

我还有一个选择过滤器，允许用户选择 ID (100~ 108)。假设用户选择 101，那么过滤后的内容将如下所示：

2014/7/21

101: 2014/7/21 05:30

2014/7/22

2014/7/23

2014/7/24

因此，我想知道是否有一种方法可以在应用过滤器时动态隐藏/显示标题？

JsFiddle： http://jsfiddle.net/4D3Jw/5/

查看

<div ng-app="myApp">
    <div ng-controller='GroupController'>

        <select class="col-md-12" ng-model="IDFilterSelect">
            <option value="" selected>All</option>
            <option ng-repeat="option_ID in options" value="{{option_ID.id}}">{{option_ID.id}}</option>
        </select>

        <ul ng-repeat="log in logs">
            <h2><b>{{log.dateheader | moment:'YYYY/M/D'}}</b></h2>                

            <li ng-repeat="item in log.items | IDFilter: IDFilterSelect" >
                <div>
                    <span><b>{{item.id}}:</b>  </span>
                    <span>{{item.datetime | moment:'YYYY/M/D hh:mm' }}</span>    
                    <br /> 
                </div>  
            </li>       
        </ul>   
    </div>
</div>

控制器

var app = angular.module('myApp', []);

app.controller('GroupController', function ($scope) {

    var myLogs = [{
        id: 100,
        datetime: "2014-07-21T17:30:00"

    }, {
        id: 101,
        datetime: "2014-07-21T17:30:00"
    }, {
        id: 102,
        datetime: "2014-07-22T17:30:00"
    }, {
        id: 103,
        datetime: "2014-07-22T17:30:00"            
    }, {
        id: 104,
        datetime: "2014-07-22T17:30:00"
    }, {
        id: 105,
                  datetime: "2014-07-23T17:30:00"
    }, {
        id: 106,
                  datetime: "2014-07-23T17:30:00"
    }, {
        id: 107,
                  datetime: "2014-07-23T17:30:00"
    }, {
        id: 108,
                  datetime: "2014-07-24T17:30:00"
    }];

    $scope.options = _.uniq(myLogs, 'id');        

    $scope.logs = _.chain(myLogs).groupBy(function (log) {
        var moment_log_datetime = moment(log.datetime, "YYYY-MM-DD");
        return (moment_log_datetime.format("YYYY-MM-DD"));
    }).pairs().map(function (currentItem) {

        return _.object(_.zip(["dateheader", "items"], currentItem));
    }).value();


})


app.filter('moment', function () {
    return function (dateString, format) {
        return moment(dateString).format(format);
    };
});

app.filter('IDFilter', [function () {
    return function (myLogs, ID) {
        if (!angular.isUndefined(ID) && !angular.isUndefined(myLogs)) {
            if(ID != ""){
            var logs = _.filter(myLogs, function (log) { return log.id == ID });

                return logs;
            }
            else{
              return myLogs;  
            }
        }
        else {
            return myLogs;
        }


    };

} ]);

【问题讨论】：

标签： javascript angularjs filtering grouping momentjs

【解决方案1】：

您可以在h2 标记中添加ng-show="log.items.length"。当log.items.length 为 0（假值）时，它将被隐藏。 ngShow

【讨论】：

ng-show="(log.items | IDFilter: IDFilterSelect).length > 0"。在<ul> 标签上比<h2> 标签要好得多。
对<ul>标签和过滤器的良好调用。我没有注意到您正在过滤收藏！