我有一个根据日期分组的内容分组列表:
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;
}
};
} ]);
最佳答案
您可以将 ng-show="log.items.length"
放入 h2
标记中。当log.items.length
为0(假值)时它将被隐藏。 ngShow
关于javascript - 使用 Angularjs 过滤分组内容时隐藏分组标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24872987/