通过 angularjs 在 html 视图中订购包含日期的对象答案

【问题标题】：to order object contain dates in html view by angularjs通过 angularjs 在 html 视图中订购包含日期的对象
【发布时间】：2016-10-05 07:31:30
【问题描述】：

我必须根据日期按升序排列状态（P，A），但它显示的顺序与插入它们的顺序相同。但我想根据日期安排。

API 数据：-

$scope.students{

"name": "sample",
"def": [
    {
        "setId": "arun",
        "Date": [

            {
                "day": "2016-09-28",
                "status": "A"
            },
            {
               "day": "2016-09-27",
                "status": "P"
            },

    {
                "day": "2016-09-29",
                "status": "A"
            },

    {
                "day": "2016-09-26",
                "status": "P"
            }
        ]
    },
    {
        "name": "deepak",
        "Date": [
             {
                "day": "2016-09-28",
                "status": "P"
            },
            {
               "day": "2016-09-27",
                "status": "A"
            },
    {
                "day": "2016-09-29",
                "status": "A"
            },

    {
                "day": "2016-09-26",
                "status": "P"
            },
        ]
    }
]

}

html页面：-

<table>
<tbody>
  <tr>
    <td>S.No.</td>
    <td>NAME</td>
    <td>26-9-2016</td>
    <td>27-9-2016</td>
    <td>28-9-2016</td>
    <td>29-9-2016</td>
  </tr>
  <tr data-ng-repeat="student in students" st-select-row="row">
        <td data-ng-bind="$index+1"></td>
        <td data-ng-bind="student.name"></td>
        <td data-ng-repeat="data in student.Date" data-ng-bind="data.status"></td>
  </tr>
</tbody>
</table>

想以这种方式在屏幕上显示：

 1. Name   | 26-9-2016 | 27-9-2016 | 28-9-2016 | 29-9-2016|
 2. Arun   | P         | P         | A         | A        |
 3. dDepak | P         | A         | P         | A        |

但我在屏幕上以这种方式进入：

  1. Name   | 26-9-2016 | 27-9-2016 | 28-9-2016 | 29-9-2016|
  2. Arun   | A         | P         | A         | p        |
  3. Deepak | P         | A         | A         | P        |

【问题讨论】：

你检查了解决方案中的工作演示吗？

标签： angularjs angularjs-directive angularjs-ng-repeat angularjs-filter

【解决方案1】：

angular.module('myApp', ['ng'])
  .controller('Ctrl', ['$scope',
    function($scope) {

      $scope.students = {

        "name": "sample",
        "def": [{
          "name": "arun",
          "Date": [

            {
              "day": "2016-09-28",
              "status": "A"
            }, {
              "day": "2016-09-27",
              "status": "P"
            },

            {
              "day": "2016-09-29",
              "status": "A"
            },

            {
              "day": "2016-09-26",
              "status": "P"
            }
          ]
        }, {
          "name": "deepak",
          "Date": [{
              "day": "2016-09-28",
              "status": "P"
            }, {
              "day": "2016-09-27",
              "status": "A"
            }, {
              "day": "2016-09-29",
              "status": "A"
            },

            {
              "day": "2016-09-26",
              "status": "P"
            },
          ]
        }]
      };
    }
  ]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<body ng-app="myApp" ng-controller="Ctrl">

   <table>
<tbody>
  <tr>
    <td>S.No.</td>
    <td>NAME</td>
    <td>26-9-2016</td>
    <td>27-9-2016</td>
    <td>28-9-2016</td>
    <td>29-9-2016</td>
  </tr>
  <tr data-ng-repeat="student in students.def" st-select-row="row">
        <td data-ng-bind="$index+1"></td>
        <td data-ng-bind="student.name"></td>
        <td data-ng-repeat="data in student.Date | orderBy :'day'" data-ng-bind="data.status"></td>
  </tr>
</tbody>
</table>
</body>

Json 数据有一些名称错误的键，因此根据您的问题做了一些假设，并对您的 HTML 部分进行了更改。

<tr data-ng-repeat="student in students.def" st-select-row="row">
        <td data-ng-bind="$index+1"></td>
        <td data-ng-bind="student.name"></td>
        <td data-ng-repeat="data in student.Date | orderBy :'day'" data-ng-bind="data.status"></td>
  </tr>

只需使用orderBy 并在您的情况下提供执行订购的密钥'day'

【讨论】：

day 是 'string' 格式才能使用 orderBy- 'day' 你必须先将它转换成日期格式。但在转换后也没有给出正确的输出。我曾使用 orederBy 和过滤器。
检查代码 sn-p ，它工作正常。更新答案