Javascript 使用Angularjs筛选分组内容时隐藏分组标头

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

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：

查看

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

---

您可以在

h2

标记中放置

ng show=“log.items.length”

。当

log.items.length

为0（falsy值）时，它将被隐藏

ng show=“（log.items | IDFilter:IDFilterSelect）.length>0”

。而且在

标签上比在

标签上好得多。在

标签和过滤器上打电话很好。我没注意到你在过滤收藏！

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


    };

} ]);