, используя Ng-таблицу, добавив фильтр пользовательских номеров в конкретный столбец

Question

Я искал решение по всему Интернету, но не смог найти решение, которое соответствует моей конкретной потребности.

У меня есть таблица (построенная с использованием модуля ng-table) с несколькими столбцами, как показано ниже.

headerA headerB  headerC_start  headerC_end 
-filter- -filter- -filter-   -filter- 
AAA  AAAA  10     10 
BBB  BBBB  12     12 
CCC  CCCC  13     13 
DDD  DDDD  14     14 
EEE  EEEE  15     15 
FFF  FFFF  22     22 

Каждый фильтр прямо под заголовком работает как «содержащий» функциональный фильтр. То, что я имею в виду под «содержать», это если я положил «1» в фильтр заголовка C, он будет показывать 10, 12, 13, 14 и 15 (так как эти числа содержат «1») с соответствующими данными из заголовка A и B.

Для заголовков A и B «содержать» все в порядке, но я хочу, чтобы заголовок C имел функцию «range» вместо «содержать». Поэтому моя цель - ввести минимальное значение в headerC_start и максимальное значение в headerC_end, и я хочу, чтобы таблица отфильтровывала все числа между этим минимумом и максимумом со всеми соответствующими заголовками формы информации A и B. Итак, если я ставлю 10 на headerC_start и 14 в headerC_end, он будет показывать только 10, 12, 13 и 14 со всей соответствующей информацией из заголовка A и заголовка B.

Я пробовал несколько разных способов решить эту проблему, включая запись собственной функции фильтра , но я не смог применить эту функцию пользовательского фильтра к header_C, поскольку все заголовки A, B и C привязаны к модулю ng-table.

Ниже приведены фрагменты моих кодов.

--- HTML

<table ng-table="someTable" show-filter="true" class="table table-bordered table-striped table-condensed"> 
<tr ng-repeat="item in data"> 


    <td data-title="'headerA'" sortable="'headerA'" filter="{ 'headerA': 'text' }" > 
     {{item.attributeA}} 
    </td> 

    <td data-title="'headerB'" sortable="'headerB'" filter="{ 'headerB': 'text' }" > 
     {{item.attributeB}} 
    </td> 


    <td data-title="'headerC_start'" sortable = "'headerC_start'" filter = "{'headerC_start':'text'}"> 
     {{item.attributeC}} 
    </td> 


    <td data-title ="'headerC_end'" sortable = "'headerC_end'" filter="{'headerC_end':'text'}"> 
     {{item.attributeC}} 
    </td> 

--- JS

angular.module('someApp', ['ngTable', 'ui.bootstrap', 'mainApp']) 

.config(function someAppConfig($routeProvider) { 

    $routeProvider 
     .when('/some', { 
      templateUrl: 'view/some.html', 
      controller: 'some_table_controller' 
     }); 
}) 



.controller('some_table_controller', function ($scope, $http, $filter, NgTableParams) { 


    $http.get("http://127.0.0.1:5000/some/range/xxxx", {cache: true}) 
     .then(function (response) { 
      $scope.something = response.data; 


      $scope.somethingTable = new NgTableParams({ 
       page: 1, 
       count: 10 

      }, 

       { 


       getData: function (params) { 
        if (params.sorting()) { 
         $scope.data = $filter('orderBy')($scope.something, params.orderBy()); 
        } else { 
         $scope.data = $scope.something; 
        } 
        if (params.filter()) { 
         $scope.data = $filter('filter')($scope.data, params.filter()); 
        } else { 
         $scope.data = $scope.data; 
        } 
        $scope.data = $scope.data.slice((params.page() - 1) * params.count(), params.page() * params.count()); 
        return $scope.data; 
      } 

     }); 

    }); 
}); 

в течение нескольких часов, я попробовал самый правильный на этом примере (пользовательские функции фильтра)

http://codepen.io/christianacca/pen/yNWeOP

Но я не смог найти способ реализовать код примера для моего скрипта.

Я бы очень признателен за любые входные данные !!!!

Thanks

Answer 1

Я только что решил аналогичную проблему. Я использовал пользовательский фильтр

HTML (используя Thymeleaf)

<td th:attr="data-title=|'My Header'|" filter="{'headerA' : 'numberRange'}"> 

Фильтр:

<script type="text/ng-template" id="ng-table/filters/numberRange.html"> 
    <form class="form-inline"> 
     <span>Between</span> 
     <input type='number' ng-model="params.filter()[name + 'Min']" name="filter-numberRange" class="form-control" min="1" /> 
     <span>and</span> 
     <input type='number' ng-model="params.filter()[name + 'Max']" name="filter-numberRange" class="form-control" min="1" /> 
    </form> 
</script> 

На вашем JavaScript

var minRange = params.filter().headerAMin; 
var maxRange = params.filter().headerAMax; 

Надеется, что это помогает