Angular JS Using "Multiple Filters"

Question

I am using AngularJS in a SharePoint 2013 App but I don't think SharePoint here will influence the response (I could be wrong there, though).

I have a custom list of about 350 requests each with a RequestType from a list of (Development,Design,EmailCampaign,AdWords) and a title (any other info is immaterial).

On the Landing Page of the App, I am presenting 4 tables (one for each RequestType) so that it is easier for the person responsible to see their queue. I am also adding an input of text to each table to filter the results by the title so the user can find a task quickly.

I can get either filter to work independent of the other but I have no idea how to implement them together. Can this be done? If so, how?

Sample Data:

{ title: Easter Sale Campaign, RequestType: EmailCampaign},
{ title: Easter Sale Microsite Prototype, RequestType: Design},
{ title: Easter Sale Microsite Sprites, RequestType: Design},
{ title: Easter Sale AdWords Analytics, RequestType: AdWords},
{ title: Easter Sale Microsite Build, RequestType: Development},
{ title: Easter Sale Microsite Test, RequestType: Development},
{ title: Easter Sale PromoteToProduction, RequestType: Development},
{ title: Spring Sale Campaign, RequestType: EmailCampaign},
{ title: Spring Sale Microsite Prototype, RequestType: Design},
{ title: Spring Sale Microsite Sprites, RequestType: Design},
{ title: Spring Sale AdWords Analytics, RequestType: AdWords},
{ title: Spring Sale Microsite Build, RequestType: Development},
{ title: Spring Sale Microsite Test, RequestType: Development},
{ title: Spring Sale PromoteToProduction, RequestType: Development}

HTML

<div id="landing_header_bar" data-tbl="tblDesign" class="clr-blue">
    <img alt="Close This" class="btnToggleLanding" src="../Images/close_btn.png" ng-click="taskClose = true" ng-hide="taskClose" />
    <img alt="Open This" class="btnToggleLanding" src="../Images/open_btn.png" ng-click="taskClose = false" ng-show="taskClose" />
    <h3 class="divider_title inlined">Design Requests</h3>
    <span class="filterQueue">
        Filter:&nbsp;<input type="text" ng-model="taskFilter" />
    </span>
</div>
<table class="tblLanding">
    <tr class="landing_header_row">
        <th ng-click="doTasksSort('Priority')">Priority</th>
        <th ng-click="doTasksSort('Task_Id')">ID</th>
        <th ng-click="doTasksSort('Description')">Title</th>
        <th ng-click="doTasksSort('RequestType')">Task Type</th>
    </tr>
    <tbody>
        <tr class="landing_data_row" ng-repeat="req in requests | filter:request.requestType="Design" | orderBy:sortTasksBy:!reverse">
            <td style="text-align:center;">
                <img ng-src="../Images/{{req.Priority}}.jpg" />
            </td>
            <td style="text-align:center;">{{req.Task_Id}}</td>
            <td><a href="#">{{req.title}}</a></td>
            <td>{{req.requestType'}}</td>
        </tr>
        <tr ng-show="requests.length == 0"><td colspan="8" align="center"><strong>No Requests Found!</strong></td></tr>
    </tbody>
</table>

goutham · Accepted Answer · 2014-04-13 17:13:05Z

2

You are breaking the filter chain by using double quotes around "Design".

You should use it like this:

<tr class="landing_data_row" ng-repeat="req in requests | filter:request.requestType='Design' | orderBy:sortTasksBy:!reverse">

or

<tr class="landing_data_row" ng-repeat='req in requests | filter:request.requestType="Design" | orderBy:sortTasksBy:!reverse'>

edited Apr 13, 2014 at 17:13

answered Apr 13, 2014 at 16:50

goutham

2402 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

jgravois Over a year ago

that fixed the initial filter to fill the boxes...Thanks! Now, how do I wire up the type filter to allow the user to search within the already filtered results to find the request they are seeking?

goutham Over a year ago

@jgravois you mean filter over the search term 'taskFilter' ?

jgravois Over a year ago

yes, I want the contents of each table to be filtered again by whatever is entered in the input

goutham Over a year ago

you can pipe the search filter as the third one like ` '| filter: taskFilter' `

jgravois Over a year ago

thanks, again ... I didn't know you could have 2 filter objects

Collectives™ on Stack Overflow

Angular JS Using "Multiple Filters"

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related