Question

我正在尝试显示针对特定产品的付款清单。因此，如果我以2000美元的价格购买了产品，我可以设置每月100美元的付款，我想尝试跟踪是否付款。

我有一个嵌套的ng-repeat。第一个重复显示产品列表以及相关的ID。例如：

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 = true 其中N = contentHistory.paid = false

日期应从每年的1月至12月排序，格式收到.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

刚刚实现了这一点。稍微修改了您的标记。并将新属性Year和Month添加到内容历史记录项。检查此plunker

＆＃13;

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'
        }
      });
    }
  }
});

＆＃13;

<!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>

＆＃13;

按年份和月份的订单和分组数据

1 个答案: