Add drop down filter and date range to ng repeat table?

[robhaas]

I have a table built in my service portal widget using ng-repeat. I am wanting to add a drop down filter to a specific column header (state), and also allow a date range picker for the column header (created). Has anyone done this or could someone possibly provide assistance/point me in the right direction?

My example here is that I am providing users a list of their requested items within the last x time. This is a full list. I would like to allow them the option to look at items in a specific state, or date range, or clear the filter all together.

Thanks in advance for all help!

EDIT: I've found this and am just not fully sure how to port it into a widget:

https://jeffshamley.com/blogs/dynamically-filtering-lists-angularjs

The beginning part I'm not sure what to do with :

angular.module('app', [])
.controller('appCtrl', function($scope) {
// define list of cars

Message was edited by: Robert Haas

[Justin Abbott]

You'll probably need to use some sort of filter function and filter the ng-repeat based on some logic in the function, combined with a $scope variable.

Here's some pages that might help you out:

Recipes with Angular.js - Filtering and Sorting a List

https://codepen.io/PageOnline/pen/nCfAj

https://codepen.io/thelifenadine/pen/rammwv

Do you have any example code we can look at?

[robhaas]

Thanks for the examples! Playing with that, I was able to add a filter on state. It isn't on the table, but is above it and works. I can work on moving that. However, there may be a cleaner way to do it. Here is the html I have at the moment prior to adding the filter.

The date value is pulling from sys_created_on and using gs.getDateValue(). I'd like to add the options of date ranges based on this table.

<div class="panel panel-{{::options.color}} b">
<div class="panel-heading">
       <h4 class="panel-title"><fa ng-if="::options.glyph.length" name="{{::options.glyph}}" class="m-r-sm" /><b>${My Requests}</b></h4>
   </div>
<div>
       <table>
   <thead>
   <tr>
                   <th>Number</th>
                   <th>Short Description</th>
                   <th>State</th>
                   <th style="width: 88px;">Created</th>
               </tr>
           </thead>

   <tbody>
               <tr ng-repeat="req in data.request">
                       <td><bold><a href = "urlhere">{{req.number}}</a></bold></td>
                       <td>{{req.shortdescription}}</td>
                       <td>{{req.state}}</td>
                       <td>{{req.created}}</td>
                           </tr>
           </tbody>
       </table>
       </div>

       <div ng-if="!c.data.count" class="list-group-item">
       ${No records found}
       </div>
</div>

[robhaas]

So I have been playing around a bit more snagging stuff from online and attempting to understand/make it work. Here is my html and my client controller currently. It will filter based on any column text, or a drop down/selected state from a pre-defined list. I need to make it filter Created still based on a selected range which I am searching on. Also want to group states. So if an item is received, in progress, or pending, it is just "Open".   Any pointers? As an fyi, this probably no where near good code, just me trying to learn and fix. All thoughts on cleanup or different code is appreciated.

HTML:

<div class="container">
       <div class="row">
               <div class="panel panel-primary filterable">
                       <div class="panel-heading">
                               <h3 class="panel-title">
                                     My Requests
                               </h3>
                               <div class="pull-right">
                                       <button class="btn btn-default btn-xs btn-filter"><span class="glyphicon glyphicon-filter"></span> Filter</button>
                               </div>
                       </div>
                       <table class="table">
                               <thead>
                                       <tr class="filters">
                                               <th><input type="text" class="form-control" placeholder="Number" disabled></th>
                                               <th><input type="text" class="form-control" placeholder="Short Description" disabled></th>
                                               <th>
                                                       <select class="form-control">
                                                               <option></option>
                                                               <option>Request Received</option>
                                                               <option>Manager Approved</option>
                                                       </select>
                                               </th>                                       
                                               <th><input type="text" class="form-control" placeholder="Created" disabled></th>
                                       </tr>
                               </thead>
                               <tbody>
               <tr ng-repeat="req in data.request">
                   <td><bold><a href = "urlhere">{{req.number}}</a></bold></td>
                   <td>{{req.shortdescription}}</td>
                   <td>{{req.state}}</td>
                   <td>{{req.created}}</td>
               </tr>
                               </tbody>
                       </table>
               </div>
       </div>
</div>

Client Controller:

function(){
       $('.filterable .btn-filter').click(function(){
               var $panel = $(this).parents('.filterable'),
               $filters = $panel.find('.filters input, .filters select'),
               $tbody = $panel.find('.table tbody');
               if ($filters.prop('disabled') == true) {
                       $filters.prop('disabled', false);
                       $filters.first().focus();
               } else {
                       $filters.val('').prop('disabled', true);
                       $tbody.find('.no-result').remove();
                       $tbody.find('tr').show();
               }
       });


       $('.filterable .filters input').keyup(function(e){
               /* Ignore tab key */
               var code = e.keyCode || e.which;
               if (code == '9') return;
               /* Useful DOM data and selectors */
               var $input = $(this),
               inputContent = $input.val().toLowerCase(),
               $panel = $input.parents('.filterable'),
               column = $panel.find('.filters th').index($input.parents('th')),
               $table = $panel.find('.table'),
               $rows = $table.find('tbody tr');

               var $filteredRows = $rows.filter(function(){
                       var value = $(this).find('td').eq(column).text().toLowerCase();
                       return value.indexOf(inputContent) === -1;
               });
               /* Clean previous no-result if exist */
               $table.find('tbody .no-result').remove();
               /* Show all rows, hide filtered ones (never do that outside of a demo ! xD) */
               $rows.show();
               $filteredRows.hide();
               /* Prepend no-result row if all rows are filtered */
               if ($filteredRows.length === $rows.length) {
                       $table.find('tbody').prepend($('<tr class="no-result text-center"><td colspan="'+ $table.find('.filters th').length +'">No result found</td></tr>'));
               }
       });

       $('.filterable .filters select').change(function(e){
               /* Ignore tab key */
               /* Useful DOM data and selectors */
               var $input = $(this),
               inputContent = $input.val().toLowerCase(),
               $panel = $input.parents('.filterable'),
               column = $panel.find('.filters th').index($input.parents('th')),
               $table = $panel.find('.table'),
               $rows = $table.find('tbody tr');

               var $filteredRows = $rows.filter(function(){
                       var value = $(this).find('td').eq(column).text().toLowerCase();
                       return value.indexOf(inputContent) === -1;
               });
               /* Clean previous no-result if exist */
               $table.find('tbody .no-result').remove();
               /* Show all rows, hide filtered ones (never do that outside of a demo ! xD) */
               $rows.show();
               $filteredRows.hide();
               /* Prepend no-result row if all rows are filtered */
               if ($filteredRows.length === $rows.length) {
                       $table.find('tbody').prepend($('<tr class="no-result text-center"><td colspan="'+ $table.find('.filters th').length +'">No result found</td></tr>'));
               }
       });       

};

[Justin Abbott]

Can you post the Server Script too, just for testing purposes?