这是我的中继器:
<div ng-controller="EventController">
<div class="input-group" id="search">
<label>Search:</label><input type="text" id="searchField" class="form-control" ng-model="search" /><br />
<select id="searchByDate" class="form-control" ng-model="dateFilter">
<option value="">Filter by Month</option>
@{
foreach (DateTime month in ViewBag.Months)
{
<option value="@month.ToString("yyyy-MM")">@month.ToString("MMMM yyyy")</option>
}
}
</select>
</div>
<div class="row" style="margin: 0; padding: 0" ng-repeat="DateBegin in events|groupBy:'DateBegin'|filter: dateFilter"><br />
<h2 style="padding: 0" margin: 0;>{{ DateBegin | date:'medium' }}</h2><br />
<div class="row tableCell" ng-repeat="event in events | filter: { DateBegin: DateBegin } | filter: search">
<a href="/EventDetails/{{ event.ID }}"><h1>{{ event.Name }}</h1></a>
<p>{{ event.Description }}</p>
<ul>
<li>Time Begin: {{ event.TimeBegin }}</li>
<li>Duration: {{ event.Duration }}</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
var myApp = angular.module('myApp', []);
function EventController($scope, $http) {
$http({
method: 'GET',
url: '//localhost:60009/api/event'
})
.success(function (data) {
$scope.events = data;
})
.error(function (data) {
});
}
var uniqueDates = function (data, key) {
var result = [];
for (var i = 0; i < data.length; i++) {
var value = data[i][key];
if (result.indexOf(value) == -1) {
result.push(value);
}
}
return result;
};
myApp.filter('groupBy',
function () {
return function (collection, key) {
if (collection === null) return;
return uniqueDates(collection, key);
};
});
</script>
完全符合我的期望,减去了一些格式化。事件按日期分组,日期选择器可以过滤月份,搜索框可以过滤事件详细信息。这是我唯一的问题:
过滤之前(看起来不错):
过滤后(空日期仍然出现-在这张照片中,我希望5月23日消失):
我该怎么做才能摆脱空日期?我可以添加到过滤器中吗?
在这种情况下,我可能会尝试进行类似的工作,ng-if="value !== EmptyValue"
而不是制作并努力过滤“无效数据”。
ng-if
overng-hide
或or的优点之一ng-show
是,它完全删除了元素,因此该额外的html不保留在页面上。
或者,您可以对数据应用第二个过滤器,例如:
DateBegin in (events |filter:emptyEvents) |filter: dateFilter
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句