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