Javascript 如何筛选中继器中的子属性？

我有一个中继器设置为基于一些东西进行过滤。但是，我在筛选子属性时遇到问题。我有一个填充了类别ID的选择器：

<select id="searchByCategory" class="form-control ng-pristine ng-valid" ng-model="categoryFilter">
        <option value="">Filter By Category</option>
        <option value="1">Music</option>
        <option value="4">Sports</option>
        <option value="18">Theater</option>
        <option value="19">Exhibit/Class</option>
        <option value="21">Other</option>
</select>

按类别筛选
音乐
体育
剧院
展品/类别
其他

和中继器：

<div class="row tableCell" ng-repeat="event in events | filter: { DateBegin: DateBegin } | filter: search | filter: { Category.ID: categoryFilter }">
        <h2 ng-show="$first">{{ event.DateBegin | date:'MMMM d, yyyy' }}</h2><br />
        <a href="/EventDetails/{{ event.ID }}"><h1>{{ event.Name }}</h1></a>
        <p>{{ event.Description }}</p>
        <ul>
            <li>Category ID: {{ event.Category.ID }}</li>
            <li>Category Name: {{ event.Category.Name }}</li>
            <li>Time Begin: {{ event.TimeBegin }}</li>
            <li>Duration: {{ event.Duration }}</li>
        </ul>
</div>

{{event.DateBegin}date:'MMMM d，yyyy'}}

{{event.Description}


类别ID:{event.Category.ID}
类别名称：{{event.Category.Name}
时间开始：{event.TimeBegin}
持续时间：{event.Duration}

我知道Category.ID和Category.Name正在工作，因为它们显示在事件详细信息中。但是，只要我尝试从下拉菜单中选择一个类别，就不会显示任何事件。我的过滤器出了什么问题？

您必须更换

filter: { Category.ID: categoryFilter }

到

我在这个plunkr上做了一个演示，尝试更改选择选项（看起来像你的情况）

（此plnkr是根据上的演示编辑而成）

filter: { Category: categoryFilter }