比较AngularJS ng-repeat中的值

时间:2017-03-22 16:34:28

标签: javascript angularjs json angularjs-ng-repeat

我有一个JSON对象,其中包含许多客户端,每个客户端我有几个月的时间,并在该月的某些日期范围内付款。

我正在尝试遍历此客户列表以显示每个客户的表格,并在此表格中显示该月份的付款。棘手的部分是我需要强调付款的时间与前一时期不同。我的问题是我设法比较同月的付款,但是我没有设法比较当月第一个月的付款与上个月的最后一个月。

这是我的JSON(由遗留系统返回):

{  
 "customers":[  
    {  
     "name":"John",
     "months":{  
        "1":{  
           "details":[  
              {  
                 "startDate":1483225200000,
                 "endDate":1483830000000,
                 "payment":250
              },
              {  
                 "startDate":1483916400000,
                 "endDate":1485817200000,
                 "payment":350
              }
           ]
        },
        "2":{  
           "details":[  
              {  
                 "startDate":1485903600000,
                 "endDate":1487026800000,
                 "payment":350
              },
              {  
                 "startDate":1487113200000,
                 "endDate":1488236400000,
                 "payment":350
              }
           ]
        },
        "3":{  
           "details":[  
              {  
                 "startDate":1488322800000,
                 "endDate":1490911200000,
                 "payment":250
              }
           ]
        },
        "4":{  
           "details":[  
              {  
                 "startDate":1490997600000,
                 "endDate":1491688800000,
                 "payment":275
              },
              {  
                 "startDate":1491775200000,
                 "endDate":1493503200000,
                 "payment":275
              }
           ]
        }
     }
  },
  {  
     "name":"Bob",
     "months":{  
        "1":{  
           "details":[  
              {  
                 "startDate":1483225200000,
                 "endDate":1483830000000,
                 "payment":250
              },
              {  
                 "startDate":1483916400000,
                 "endDate":1485817200000,
                 "payment":350
              }
           ]
        },
        "2":{  
           "details":[  
              {  
                 "startDate":1485903600000,
                 "endDate":1487026800000,
                 "payment":350
              },
              {  
                 "startDate":1487113200000,
                 "endDate":1488236400000,
                 "payment":350
              }
           ]
        },
        "3":{  
           "details":[  
              {  
                 "startDate":1488322800000,
                 "endDate":1490911200000,
                 "payment":250
              }
           ]
        },
        "4":{  
           "details":[  
              {  
                 "startDate":1490997600000,
                 "endDate":1491688800000,
                 "payment":275
              },
              {  
                 "startDate":1491775200000,
                 "endDate":1493503200000,
                 "payment":275
              }
           ]
        }
     }
  },
  {  
     "name":"Jane",
     "months":{  
        "1":{  
           "details":[  
              {  
                 "startDate":1483225200000,
                 "endDate":1483830000000,
                 "payment":250
              },
              {  
                 "startDate":1483916400000,
                 "endDate":1485817200000,
                 "payment":350
              }
           ]
        },
        "2":{  
           "details":[  
              {  
                 "startDate":1485903600000,
                 "endDate":1487026800000,
                 "payment":350
              },
              {  
                 "startDate":1487113200000,
                 "endDate":1488236400000,
                 "payment":350
              }
           ]
        },
        "3":{  
           "details":[  
              {  
                 "startDate":1488322800000,
                 "endDate":1490911200000,
                 "payment":250
              }
           ]
        },
        "4":{  
           "details":[  
              {  
                 "startDate":1490997600000,
                 "endDate":1491688800000,
                 "payment":275
              },
              {  
                 "startDate":1491775200000,
                 "endDate":1493503200000,
                 "payment":275
              }
           ]
        }
     }
  }
 ]
}

这是我的HTML,我试图循环使用ng-repeat并尝试在付款时使用“突出显示”类与前一个不同:

<table ng-repeat="customer in customersList">
<tbody ng-repeat="month in customer.months">
    <tr ng-repeat="detail in customer.details track by $index">
        <td data-ng-class="{'highlight' : month.details[$index-1].payment != month.details[$index].payment && $index > 0}">{{::detail.payment}} {{month.details[$index-1].payment != month.details[$index].payment && $index > 0}}</td>
        <td data-ng-class="{'highlight' : month.details[$index-1].payment != month.details[$index].payment && $index > 0}">{{::detail.payment | currency}} {{$parent.customers.months[$index].details[$index-1].payment}}</td>
    </tr>
</tbody>
</table>

我尝试使用$ parent尝试访问上个月,并能够将上个月的最后一笔付款与新月的第一笔付款进行比较,但却失败了。有人可以告诉我我做错了什么,以及这是否可行?

1 个答案:

答案 0 :(得分:0)

您当前的实施失败,因为month.detailscustomer.months中的索引,您希望索引位于<table ng-repeat="customer in customersList"> <tbody ng-repeat="month in customer.months"> <tr ng-init="monthIndex = $index" ng-repeat="detail in customer.details track by $index"> <td data-ng-class="{'highlight' : customer.months[monthIndex - 1].details[$index].payment != month.details[$index].payment && monthIndex > 0}"> {{::detail.payment}} {{customers.months[monthIndex - 1].details[$index] != month.details[$index].payment && $index > 0}} </td> <td data-ng-class="{'highlight' : customer.months[monthIndex - 1].details[$index-1].payment != month.details[$index].payment && monthIndex > 0}"> {{::detail.payment | currency}} {{customers.months[monthIndex - 1].details[$index].payment}} </td> </tr> </tbody> </table>

这是the ng-init directive的目的。

我不是百分之百确定你打算如何比较付款,但我相信你想要这样的东西:

monthIndex

这会将month.details设置为进入month.details循环之前的当前月份的索引。此范围变量在monthIndex - 1循环中可用,因此您可以使用create table Dates ( id int identity(1,1) primary key, dates DateTime Not Null Default(GetDate()) ) 查看上个月。