Hello! How to display information in the table weekly and separately for each day using angularjs. Those. Clicking for example on the "Next day / week" table displays the next week or day. Googled all day and did not find information on how to iterate over the date in case of a day.

public class Game { public int Id { get; set; } public string Name { get; set; } public virtual ICollection<Gamer> Gamers { get; set; } public Game() { Gamers = new List<Gamer>(); } } public class Gamer { public int Id { get; set; } public string Name { get; set; } public int MaxScore { get; set; } public DateTime GamerDate { get; set; } public virtual ICollection<Game> Games { get; set; } public Gamer() { Games = new List<Game>(); } } public class LeaderBordContext : DbContext { public DbSet<Gamer> Gamers { get; set; } public DbSet<Game> Games { get; set; } public LeaderBordContext() : base("DefaultConnection") { } }
  • Write the data sample data you want to output and the desired output. - MrFylypenko
  • @MrFylypenko There is a one-to-many model. I need to display data on gamers in the context of the game for the day, week. Binding on the client side. For the day I am about understanding. We get the current date and filter on this date. And what about the week? - Anton Evseev
  • There are a lot of examples of paginated output on the Internet, and for different intervals. So it is not clear how the desired result of your data should look like on a weekly basis and what is the difficulty? - MrFylypenko
  • I did not find an example of output per day, week. I would be grateful if you give link - Anton Evseev

1 answer 1

Here is an example of the pagination code, you only need to add the data you want to output, ideally to request data from the server when you click on the button. Used javascript Date api:

 angular.module('myApp', []). controller('myCtrl', function($scope) { $scope.todayTime = new Date().getTime(); //ะขะตะบัƒั‰ะฐั ะดะฐั‚ะฐ $scope.currentDay = new Date(); //ะžั‚ ั‚ะตะบัƒั‰ะตะน ะดะฐั‚ั‹ ะพั‚ะฝะธะผะฐะตะผ ะดะตะฝัŒ $scope.previosDay = function() { $scope.currentDay = new Date($scope.currentDay.getTime() - (1000 * 60 * 60 * 24)); } //ะš ั‚ะตะบัƒั‰ะตะน ะดะฐั‚ะต ะดะพะฑะฐะฒะปัะตะผ ะดะตะฝัŒ $scope.nextDay = function() { $scope.currentDay = new Date($scope.currentDay.getTime() + (1000 * 60 * 60 * 24)); } //ะ‘ะตั€ะตะผ ะฟะพะฝะตะดะตะปัŒะฝะธะบ ั‚ะตะบัƒั‰ะตะน ะฝะตะดะตะปะธ $scope.currentWeek = new Date($scope.todayTime - (1000 * 60 * 60 * 24) * (new Date().getDay() - 1)); //ะฃ ั‚ะตะบัƒั‰ะตะน ะฝะตะดะตะปะธ ะพั‚ะฝะธะผะฐะตะผ ะฝะตะดะตะปัŽ $scope.previosWeek = function() { $scope.currentWeek = new Date($scope.currentWeek.getTime() - (1000 * 60 * 60 * 24 * 7)); } //ะš ั‚ะตะบัƒั‰ะตะน ะฝะตะดะตะปะต ะฟั€ะธะฑะฐะฒะปัะตะผ ะฝะตะดะตะปัŽ $scope.nextWeek = function() { $scope.currentWeek = new Date($scope.currentWeek.getTime() + (1000 * 60 * 60 * 24 * 7)); } }); 
 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> <script text="text/javascript"> </script> </head> <body ng-app="myApp"> <div ng-controller="myCtrl"> <div> ะ”ะตะฝัŒ: {{currentDay | date:' yyyy-MM-dd HH:mm:ss Z EEEE '}} </div> <div> <button ng-click="previosDay()"> ะŸั€ะตะดั‹ะดัƒั‰ะธะน ะดะตะฝัŒ</button> <button ng-click="nextDay()"> ะกะปะตะดัƒัŽั‰ะธะน ะดะตะฝัŒ</button> </div> <br> <div> ะะตะดะตะปั:{{currentWeek | date:' yyyy-MM-dd HH:mm:ss Z EEEE '}} </div> <div> <button ng-click="previosWeek()"> ะŸั€ะตะดั‹ะดัƒั‰ะฐั ะฝะตะดะตะปั </button> <button ng-click="nextWeek()"> ะกะปะตะดัƒัŽั‰ะฐั ะฝะตะดะตะปั </button> </div> </div> </body> </html>