Фильтрация по дате

[AntonEvseev]

Есть такой код. Я вывожу ссылками список игр при клике на которые выводится информация по игрокам в таблице.

<div class="row">
            <div class="col-xs-12 col-sm-12 col-md-3">
                <ul ng-repeat="game in games">
                    <li><a ng-click="sort(game.Name)">{{game.Name}}</a></li>
                </ul>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-9">
                <table ng-show="onTable" ng-table="tableParams" class="table table-bordered table-hover" style="width:500px;margin-left:auto;margin-right:auto;">
                    <tr>
                        <th ng-show="onId">#</th>
                        <td>Name</td>
                        <th>MaxScore</th>
                        <th>GamerDate</th>
                        <th ng-show="onId">Id</th>
                        <th ng-show="onId">Game</th>
                    </tr>
                    <tr ng-repeat="gamer in gamers | filter : filters">
                        <td ng-show="onId">{{ gamer.Id }}</td>
                        <td>{{ gamer.Name }}</td>
                        <td>{{ gamer.MaxScore }}</td>
                        <td>{{ gamer.GamerDate | date :'yyyy-MM-dd' }}</td>
                        <td ng-show="onId">{{ gamer.Game.Id }}</td>
                        <td ng-show="onId">{{ gamer.Game.Name }}</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

var app = angular.module('app', []);
app.controller('AppController', function ($scope, $http, GamersService, GamesService) {

    $scope.onId = false;
    $scope.onTable = false;
    $scope.gamers = null;
    $scope.filters = {};
      
    $scope.sort = function (value) {
        $scope.onTable = true;
        $scope.filters = value;
    }
   
    GamersService.GetAllRecords().then(function (d) {
        $scope.gamers = d.data;
    }, function () {
        alert('Ошибка соединения с базой данных !!!');
    });

    GamesService.GetAllGames().then(function (d) {
        $scope.games = d.data;
    }, function () {
        alert('Ошибка соединения с базой данных !!!');
    });
    
});


app.factory('GamersService', function ($http) {
    var fac = {};
    fac.GetAllRecords = function () {
        return $http.get('/api/Leader/');
    }
    return fac;
});

app.factory('GamesService', function ($http) {
    var fac = {};
    fac.GetAllGames = function () {
        return $http.get('/api/game/');
    }
    return fac;
});

Мне надо добавить табы к таблицам, чтобы фильтровать по столбцу GamerDate в разрезе день/неделя/All time. Как это сделать?

[destus]

AntonEvseev,
нужен тестовый пример. У нас нет доступа к твоему /api/Leader/, /api/game/. Или поиск angular grid tuttorial.

[AntonEvseev]

Пока для примера могу написать какими данными я инициализирую бд

Gamer g1 = new Gamer { Name = "Carson", MaxScore = 2345, GamerDate = DateTime.Parse("2017-03-09") };
            Gamer g2 = new Gamer { Name = "Meredith", MaxScore = 1345, GamerDate = DateTime.Parse("2017-02-09") };
            Gamer g3 = new Gamer { Name = "Arturo", MaxScore = 3454, GamerDate = DateTime.Parse("2017-03-02") };
            Gamer g4 = new Gamer { Name = "Gytis", MaxScore = 1000, GamerDate = DateTime.Parse("2017-03-09") };
            Gamer g5 = new Gamer { Name = "Yan", MaxScore = 222, GamerDate = DateTime.Parse("2017-03-09") };
            Gamer g6 = new Gamer { Name = "Peggy", MaxScore = 4567, GamerDate = DateTime.Parse("2017-03-01") };
            Gamer g7 = new Gamer { Name = "Laura", MaxScore = 100, GamerDate = DateTime.Parse("2017-03-05") };
            Gamer g8 = new Gamer { Name = "Nino", MaxScore = 4567, GamerDate = DateTime.Parse("2017-03-02") };
            Gamer g9 = new Gamer { Name = "Cool", MaxScore = 4567, GamerDate = DateTime.Parse("2017-03-07") };
context.Gamers.Add(g1);
            context.Gamers.Add(g2);
            context.Gamers.Add(g3);
            context.Gamers.Add(g4);
            context.Gamers.Add(g5);
            context.Gamers.Add(g6);
            context.Gamers.Add(g7);
            context.Gamers.Add(g8);
            context.Gamers.Add(g9);
            context.Gamers.Add(g10);
Game ga1 = new Game
            {
                Id = 1,
                Name = "World of Tanks",
                Gamers = new List<Gamer>() { g1, g2, g3, g4, g5, g6, g7, g8, g9, g11, g12, g13, g14, g15, g16, g17, g18, g19, g20, g21, g22, g23 }
            };
            Game ga2 = new Game
            {
                Id = 2,
                Name = "Counter Strike",
                Gamers = new List<Gamer>() { g28, g27, g26, g25, g24 }
            };

API возвращает объекты в JSON из бд.
Полную структуру JSON ответа напишу вечером.

[AntonEvseev]

Вот в таком формате приходят данные

[
  {
    "Id": 1,
    "Name": "Carson",
    "MaxScore": 2345,
    "GamerDate": "2017-03-09T00:00:00",
    "GameId": 1,
    "Game": {
      "Gamers": [
        {
          "Id": 2,
          "Name": "Meredith",
          "MaxScore": 1345,
          "GamerDate": "2017-02-09T00:00:00",
          "GameId": 1
        },
        {
          "Id": 3,
          "Name": "Arturo",
          "MaxScore": 3454,
          "GamerDate": "2017-03-02T00:00:00",
          "GameId": 1
        },
        {
          "Id": 4,
          "Name": "Gytis",
          "MaxScore": 1000,
          "GamerDate": "2017-03-09T00:00:00",
          "GameId": 1
        },
        {
          "Id": 5,
          "Name": "Yan",
          "MaxScore": 222,
          "GamerDate": "2017-03-09T00:00:00",
          "GameId": 1
        },

http://pixs.ru/showimage/leaderpng_8637067_25525381.png

[AntonEvseev]

c#