Данные для заказа и группы данных по годам и месяцам

Question

Я пытаюсь показать список платежей, сделанных для определенного продукта. Итак, если я купил продукт за 2000 долларов, я бы мог установить ежемесячный платеж в размере 100 долларов, и я хочу попробовать и отслеживать, был ли этот платеж произведен или нет.

У меня есть вложенный ng-repeat. В первом повторе отображается список продуктов, а также связанный с ним идентификатор. Например:

Bed frame | ID: po8j3mau72 
Television | ID: hyf53ygt65 
Fridge | ID: gytf87hg5d 

Второе повторение показывает ежемесячный платеж.

Что я хочу, чтобы попытаться показать что-то вроде этого:

Bedframe: 
     Jan Feb Mar Apr May Jun..... 
2016  Y Y Y N Y N 
2015  Y N 
... 
... 

Television: 
     Jan Feb Mar Apr May Jun..... 
2016  Y N Y N Y N 
2015  Y Y Y Y Y Y 
... 
... 

Где Y = contentHistory.paid = истина где N = contentHistory.paid = ложь

Даты должны быть отсортированы с января - декабрь каждого года и формата в .JSON за полученный в PaymentDate ":" 2016-03-28T00: 00: 00.000Z»,

HTML:

<ul> 
    <li ng-repeat-start="item in myItem.items"> 
    {{item.addressLine1}} | ID: {{item._id}} 
    </li> 
    <li ng-repeat-end> 
    <div ng-repeat="info in contents[item._id].contentHistory"> 
     {{info.amount}} 
    </div> 
    </li> 
</ul> 

Контроллер:

app.controller('MainCtrl', function($scope, myService) { 


    $scope.test = 'hello'; 

    myService.getItemModel(function(itemModel) { 

     $scope.myItem = itemModel; 
     $scope.contents = {}; 


     var itemList = itemModel.items; 
     itemList.forEach(function(item) { 
      var addressId = item._id; 

      myService.getContentModel(addressId) 
       .success(function (data, status, headers, config) { 
        $scope.contents[addressId] = data; 
        console.log(arguments); 
        console.log($scope.contents); 
       })      
       .error(function (data, status, headers, config) { 

       }); 
     }); 
    }); 

}); 

Услуги:

app.factory('myService', function($http, $q) { 
    return { 
     getItemModel: function(itemModel) { 
      $http.get('itemID.json') 
       .success(function(data) { 
        itemModel(data); 
       }) 
       .error(function(error) { 
        alert('An error occured whilst trying to retrieve your item data'); 
       }); 
     }, 
     getContentModel: function(addressId) { 
      return $http({ 
       method: 'GET', 
       url: addressId + '.json', 
       headers: {'Content-Type': 'application/json'} 
      }); 
     } 
    } 
}); 

Plunker: https://plnkr.co/edit/KIMScMfUdgCdOKksVyAs

Answer 1

просто реализован this.modified разметку little.and добавлены новые свойства Year и Month к содержимому элемента истории. проверьте это plunker

var app = angular.module('plunker', []); 
 

 
app.controller('MainCtrl', function($scope, myService) { 
 

 
    $scope.test = 'hello'; 
 

 
    myService.getItemModel(function(itemModel) { 
 

 
    $scope.myItem = itemModel; 
 
    $scope.contents = {}; 
 

 

 
    var itemList = itemModel.items; 
 
    itemList.forEach(function(item) { 
 
     var addressId = item._id; 
 

 
     myService.getContentModel(addressId) 
 
     .success(function(data, status, headers, config) { 
 
      angular.forEach(data.contentHistory, function(v) { 
 
      v.paymentDate = new Date(v.paymentDate); 
 
      v.Year = v.paymentDate.getFullYear(); 
 
      v.Month = v.paymentDate.getMonth(); 
 
      }); 
 
      $scope.contents[addressId] = data; 
 

 
     }) 
 
     .error(function(data, status, headers, config) { 
 

 
     }); 
 
    }); 
 
    }); 
 
    $scope.months = [{ 
 
    n: 0, 
 
    name: 'Jan' 
 
    }, { 
 
    n: 1, 
 
    name: 'Feb' 
 
    }, { 
 
    n: 2, 
 
    name: 'Mar' 
 
    }, { 
 
    n: 3, 
 
    name: 'Apr' 
 
    }, { 
 
    n: 4, 
 
    name: 'May' 
 
    }, { 
 
    n: 5, 
 
    name: 'Jun' 
 
    }, { 
 
    n: 6, 
 
    name: 'Jul' 
 
    }, { 
 
    n: 7, 
 
    name: 'Aug' 
 
    }, { 
 
    n: 8, 
 
    name: 'Sep' 
 
    }, { 
 
    n: 9, 
 
    name: 'Oct' 
 
    }, { 
 
    n: 10, 
 
    name: 'Nov' 
 
    }, { 
 
    n: 11, 
 
    name: 'Dec' 
 
    }]; 
 

 
    $scope.getData = function(data, year, month) { 
 
    var rd = data.filter(function(d) { 
 
     return d.Year == year && d.Month == month 
 
    }); 
 
    if (rd.length > 0) 
 
     return rd[0].amount; 
 
    return 'x'; 
 
    }; 
 
    $scope.getUniqueYears = function(data) { 
 
    var years = []; 
 
    angular.forEach(data, function(v) { 
 
     if (years.indexOf(v.Year) == -1) { 
 
     years.push(v.Year); 
 
     } 
 
    }); 
 
    return years; 
 
    }; 
 

 
}); 
 

 
app.factory('myService', function($http, $q) { 
 
    return { 
 
    getItemModel: function(itemModel) { 
 
     $http.get('itemID.json') 
 
     .success(function(data) { 
 
      itemModel(data); 
 
     }) 
 
     .error(function(error) { 
 
      alert('An error occured whilst trying to retrieve your item data'); 
 
     }); 
 
    }, 
 
    getContentModel: function(addressId) { 
 
     return $http({ 
 
     method: 'GET', 
 
     url: addressId + '.json', 
 
     headers: { 
 
      'Content-Type': 'application/json' 
 
     } 
 
     }); 
 
    } 
 
    } 
 
});

<!DOCTYPE html> 
 
<html ng-app="plunker"> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS Plunker</title> 
 
    <script> 
 
    document.write('<base href="' + document.location + '" />'); 
 
    </script> 
 
    <link href="style.css" rel="stylesheet" /> 
 
    <script data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js" data-require="angular.js@1.4.x"></script> 
 
    <script src="app.js"></script> 
 
</head> 
 

 
<body ng-controller="MainCtrl"> 
 

 
    <p>{{test}}!</p> 
 

 
    <div> 
 
    <h4 ng-repeat-start="item in myItem.items"> 
 
     {{item.addressLine1}} | ID: {{item._id}} 
 
     </h4> 
 
    <div ng-repeat-end> 
 
     <table> 
 
     <tr> 
 
      <td>Year</td> 
 
      <td ng-repeat="month in months"> 
 
      {{month.name}} 
 
      </td> 
 
     </tr> 
 
     <tr ng-repeat="year in getUniqueYears(contents[item._id].contentHistory)"> 
 
      <td>{{year}}</td> 
 

 
      <td ng-repeat="month in months"> 
 
      {{getData(contents[item._id].contentHistory,year,month.n)}} 
 
      </td> 
 
     </tr> 
 
     </table> 
 

 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>