angularjs中的多个过滤器

Question

在过去的9个小时中，我尝试解决这个问题，阅读了多个问题以及有关角度的文档，但是我还没有找到解决方案。

文本字段可以正常工作，而选择字段仅按字母顺序显示每个字段。...但是， 当我在选择字段中选择内容时，所有内容将从表中删除。 我必须重新加载页面才能取回物品...

如果选择“宜家”，如何只显示与宜家公司有关的物品？ 我想避免使用硬编码的过滤器函数，因为我将在多个地方使用这种类型的多重过滤，并且我不想每次都做一个单独的函数。

来自控制器的JSON：

[
{"id": "1", "position": "Lagerarbetare", "startdate": "06-07-2014", "city": "Kungenskurva", "company": "IKEA"},
{"id": "2", "position": "Webbdesigner", "startdate": "16-06-2014", "city": "Skarpnäck", "company": "Snowpeak"},
{"id": "3", "position": "Kassör", "startdate": "06-07-2014", "city": "Birsta", "company": "IKEA"},
{"id": "4", "position": "Säljare", "startdate": "06-07-2014", "city": "Gunnebo", "company": "Gunnebo"},
{"id": "5", "position": "Säljare", "startdate": "06-07-2014", "city": "Kungenskurva", "company": "Elgiganten"}
]

查看代码：

<input type="text" ng-model="search_position" placeholder="Sök" />
<div class="uk-button uk-form-select" data-uk-form-select>
    <span></span>
    <i class="uk-icon-caret-down"></i>
    <select ng-model="search_company" ng-options="job.company for job in jobs | unique: 'company' | orderBy:'company'">
        <option value="">Välj företag</option>
    </select>
</div>

<table class="uk-table uk-table-striped uk-table-hover">
    <thead>
        <tr>
            <th>Position</th>
            <th>Företag</th>
            <th>Start datum</th>
            <th>Ort</th>

        </tr>
    </thead>
    <tr ng-repeat="job in jobs | filter: { $: search_position} | filter:{ company: search_company }">
        <td class="uk-width-2-5">
            {{job.position}}
        </td>
        <td class="uk-width-1-5">
            {{job.company}}
        </td>
        <td class="uk-width-1-5">
            {{job.startdate}}
        </td>
        <td class="uk-width-1-5">
            {{job.city}}
        </td>
    </tr>
</table>

Answer 1

很抱歉，我无法将您的9个小时还给您，但我希望我能帮助您消除渴望获得可行解决方案的渴望。 :)

必须对ng-options进行一些调整，以实现所需的功能。 所选选项的值必须与过滤条件匹配。

ng-options="job.company as job.company for job in jobs | unique:'company' | orderBy:'company'"

注意job.company as job.company for job in jobs作为job.company as job.company for job in jobs的用法。

一旦选择了默认选项，还必须监视search_company模型，以重置过滤器。

$scope.$watch('search_company', function(val){
    // Watch to reset the filter
    $scope.search_company = $scope.search_company || undefined;
});

请参考此完整的DEMO进行见证。 还请通读ng-options文档中 Arguments表中的最后一行，以了解as和for在ng-options中的工作方式。