CODEWITHSUNDEEP
angularjsfiltering
Evanion
Evanion

Reputation: 188

multiple filters in angularjs

I have spend the past 9 hours trying to figure this out, I have read multiple questions, and the angular documentation, But I have yet to find a solution.

The text field works just fine, and the select field only shows one of each, and in alphabetical order.... How ever When I select something in the select field, everything is removed from the table. I have to reload the page to get the items back...

How can I get it to only show items related to the IKEA company if I select 'IKEA'? I want to avoid a hardcoded filter function, as I will have this type of multi filtering in several places, and I don't want to make a separate function each time.

JSON from controller:

[
{"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"}
]

View code:

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

Upvotes: 2

Views: 181

Answers (1)

dmahapatro
dmahapatro

Reputation: 50245

I am sorry I cannot give your 9 hours back but I hope I can help you quench your thirst for getting a workable solution. :)

ng-options has to be tweaked a bit to achieve what you need. The value of the option selected has to match with the filter criteria.

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

Notice the usage as job.company as job.company for job in jobs.

The model search_company also has to be watched in order to reset the filter once the default option is selected.

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

Refer this complete DEMO to witness the same. Also read through the last row in the Arguments table from ng-options docs to understand how as and for works in ng-options.

Upvotes: 1

Related Questions