json сортировка объекта по id angular js - PullRequest
0 голосов
/ 06 мая 2020

Мне нужно отсортировать и отобразить данные, используя angular js. Я добавил опцию сортировки в свою таблицу. но это не сортировка

, пожалуйста, проверьте мои json данные

 [
   {
      "id":143,
      "companyName":"XC",
      "dividendIncome":66666666,
      "warrantNo":"777777",
      "taxExempt":0,
      "status":"ACTIVE",
      "periodId":{
         "periodId":4,
         "period":"2020-2021",
         "startDate":"2020-04-01",
         "endDate":"2021-03-31",
         "status":null
      },
      "userId":2,
      "isSpecialCategory":false,
      "isDivDistributByInvestee":false,
      "isDivPaidOutExemptProfits":false,
      "dividendIncomeReceivedDate":"2020-05-12"
   },
   {
      "id":145,
      "companyName":"ghhh",
      "dividendIncome":6700000,
      "warrantNo":"555634",
      "taxExempt":0,
      "status":"ACTIVE",
      "periodId":{
         "periodId":4,
         "period":"2020-2021",
         "startDate":"2020-04-01",
         "endDate":"2021-03-31",
         "status":null
      },
      "userId":2,
      "isSpecialCategory":false,
      "isDivDistributByInvestee":false,
      "isDivPaidOutExemptProfits":false,
      "dividendIncomeReceivedDate":"2020-05-11"
   }
]

Я пытаюсь отобразить эти данные с помощью таблицы HTML. все данные отображаются правильно. Я покажу часть 'ng-repeat' для вашей справки

  <tr ng-repeat="dividendIncome in dividendIncomeList | orderBy:'-id'">
                                <td>{{dividendIncome.id}}</td>
                                <td>{{dividendIncome.companyName}}</td>
                                <td>{{dividendIncome.warrantNo}}</td>
                                <td align="right">{{dividendIncome.dividendIncome | number:2}}</td>
                                <td align="right">{{dividendIncome.taxExempt| number:2}}</td>
</tr> 

в соответствии с моими требованиями, мне нужно отобразить, id: 145 как первую запись и id: 143 как вторую запись

есть проблемы с моим кодом. Можете ли вы помочь решить эту проблему?

1 Ответ

0 голосов
/ 06 мая 2020

Я проверил ваш код, он верен и работает у меня.

Вот рабочий пример вашего кода

function LoginController($scope) {

    $scope.dividendIncomeList = [
   {
      "id":143,
      "companyName":"XC",
      "dividendIncome":66666666,
      "warrantNo":"777777",
      "taxExempt":0,
      "status":"ACTIVE",
      "periodId":{
         "periodId":4,
         "period":"2020-2021",
         "startDate":"2020-04-01",
         "endDate":"2021-03-31",
         "status":null
      },
      "userId":2,
      "isSpecialCategory":false,
      "isDivDistributByInvestee":false,
      "isDivPaidOutExemptProfits":false,
      "dividendIncomeReceivedDate":"2020-05-12"
   },
   {
      "id":145,
      "companyName":"ghhh",
      "dividendIncome":6700000,
      "warrantNo":"555634",
      "taxExempt":0,
      "status":"ACTIVE",
      "periodId":{
         "periodId":4,
         "period":"2020-2021",
         "startDate":"2020-04-01",
         "endDate":"2021-03-31",
         "status":null
      },
      "userId":2,
      "isSpecialCategory":false,
      "isDivDistributByInvestee":false,
      "isDivPaidOutExemptProfits":false,
      "dividendIncomeReceivedDate":"2020-05-11"
   }
];
}
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.min.js"></script>

<div ng-app ng-controller="LoginController">
    <table>
    <tbody>
     <tr ng-repeat="dividendIncome in dividendIncomeList | orderBy:'-id'">
       <td>{{dividendIncome.id}}</td>
       <td>{{dividendIncome.companyName}}</td>
       <td>{{dividendIncome.warrantNo}}</td>
       <td align="right">{{dividendIncome.dividendIncome | number:2}}</td>
       <td align="right">{{dividendIncome.taxExempt| number:2}}</td>
    
</tr> 
</tbody>
</table>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...