javascript - 使用 Angularjs 过滤分组内容时隐藏分组标题

Question

我有一个根据日期分组的内容分组列表:

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>

Controller

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


    };

} ]);

Answer 1

您可以将 ng-show="log.items.length" 放入 h2 标记中。当log.items.length为0(假值)时它将被隐藏。 ngShow