Question

这是我的转发器：

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

这完全按照我的希望工作，减去一些格式化。事件按日期分组，日期选择器可以过滤月份，搜索框会过滤事件详细信息。这是我唯一的问题：

过滤前（看起来不错）：

enter image description here

过滤后（空白日期仍然显示 - 在此图片中，我希望5月23日消失）：

enter image description here

我可以做些什么来摆脱空日？我可以添加到我的过滤器中吗？

Answer 1

我可能会在这种情况下尝试类似ng-if="value !== EmptyValue"而不是过滤“无效数据”。

ng-if优于ng-hide或ng-show的一个优点是它完全删除了该元素，因此这个额外的html不会保留在页面上。

或者您可以对数据应用第二个过滤器，例如：

DateBegin in (events |filter:emptyEvents) |filter: dateFilter

Answer 2

这可能不是最好的＆＃34;方式，但它需要对我目前的工作进行最少量的修改。我仍然将Dalorzo标记为已接受的答案，因为这来自他的答案，但这将显示我的实施：

<div class="row" style="margin: 0; padding: 0" ng-repeat="DateBegin in events|groupBy:'DateBegin'|filter: dateFilter"><br />
    <div class="row tableCell" ng-repeat="event in events | filter: { DateBegin: DateBegin } | filter: search">

        <h2 ng-show="$first">{{ event.DateBegin }}</h2> <!-- this is what I added -->

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

当孩子被过滤掉时，如何防止父母显示？

2 个答案: