JSFiddle - React, Tailwind, and code Playground

by mickeyvip

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
<div ng-controller="MainCtrl">
    <!-- <pre><code>{{payments|json}}</code></pre> -->
    <ul>
        <li ng-repeat="ymdEach in ymd">{{ymdEach | json}}
            <ul>
                <li ng-repeat="p in payments | selectiveYearMonth:ymdEach">{{p | json}}</li>
            </ul>
        </li>
    </ul>
    <!-- <ul data-ng-repeat="ymdEach in ymd">
        <li>{{ymdEach.monthId}}/{{ymdEach.yearId}} ({{ymdEach.RecCount}} Ledgers)</li>
        <li ng-repeat="p in payments | selectiveYearMonth:p:ymd">
            <div>{{getFullName(p,12)}}</div>
            <div>{{p.CategoryTitle}}</div>
            <div>{{paymentType(p,'in') }}</div>
            <div>{{paymentType(p,'out') }}</div>
            <div style="position:absolute;">
                <i class="fa fa-info-circle" tooltip="{{getPaymentDetails(p)}}">{{p.DueDate}}</i>
            </div>
            <div>{{statuses[p.LedgerStatusTitle].substring(0,8)}}</div>
        </li>
    </ul> -->
</div>

JavaScript

var app = angular.module('myApp', []);
app.controller('MainCtrl', function ($scope) {
    $scope.payments = [{
        "ToFirstName": null,
            "ToLastName": null,
            "ToFullName": null,
            "FromFirstName": null,
            "FromLastName": null,
            "FromFullName": null,
            "LedgerEntryId": "018c889b-c29b-4a22-9fa1-1fdca9b0a61d",
            "PaymentCategoryId": 2,
            "Subject": "test eet039",
            "FromUserId": 6,
            "ToUserId": null,
            "LedgerStatusId": 0,
            "LedgerStatusDate": "2014-06-10T00:00:00",
            "Amount": 1200,
            "CreatedFromLedgerEntryId": null,
            "PropertyId": 1,
            "PaymentRuleId": 12,
            "GenerationFromPaymentRuleDate": null,
            "DateCreated": "2014-06-10T00:00:00",
            "PaymentRuleId1": 12,
            "Subject1": null,
            "FromUserId1": 6,
            "ToUserId1": null,
            "StartDate": null,
            "EndDate": null,
            "DueDate": "2014-06-10T00:00:00",
            "StatusDate": null,
            "RepeatType": 1,
            "PaymentRuleStatus": true,
            "PropertyId1": 1,
            "PaymentsAmount": 1200,
            "RepeatsCount": null,
            "PaymentType": 0,
            "LedgerStatusTitle": "pending",
            "CategoryTitle": "repair"
    }, {
        "ToFirstName": "Avi",
            "ToLastName": "Algaly",
            "ToFullName": "Avi Algaly",
            "FromFirstName": "Avi",
            "FromLastName": "Algaly",
            "FromFullName": "Avi Algaly",
            "LedgerEntryId": "0db1ce10-6f40-44d5-bfa9-5a13e11b67c4",
            "PaymentCategoryId": 1,
            "Subject": "Monthly Rent",
            "FromUserId": 128,
            "ToUserId": 6,
            "LedgerStatusId": 0,
            "LedgerStatusDate": "2014-06-19T00:00:00",
            "Amount": 1500,
            "CreatedFromLedgerEntryId": null,
            "PropertyId":...