Question

我必须按照日期按升序排列状态（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        |

Answer 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'

中执行排序

订购对象包含由angularjs在html视图中的日期

1 个答案: