javascript - 如何过滤中继器内的子属性？

Question

我有一个中继器设置为根据一些事情进行过滤。但是，我在过滤子属性时遇到问题。我有一个填充了类别 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>

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

Answer 1

你必须改变

filter: { Category.ID: categoryFilter }

到

filter: { Category: categoryFilter }

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

http://plnkr.co/edit/vEVBEcnx3FLvXGJaElT3?p=preview

(此 plnkr 是根据 https://docs.angularjs.org/api/ng/filter/filter 上的演示编辑的)