Question

我正在尝试按照从JSON文件中提取的数据的字母顺序对单位部分中的数据进行排序。之前，我曾尝试为数据创建另一个过滤器控制器，在表数据头中使用GroupBy或OrderBy。我得到的结果是such，其中单位表在排序到表中后消失。

原始输出：here，其中Units列应按字母顺序排列。

我感谢任何建议，非常感谢！

HTML / units4.html

<div data-ng-controller="getCtrl" class="container">
                <div class="table-responsive">
                    <pre>Status Code: {{status}}</pre>
                    <table class="table table-bordered table-responsive table-hover">
                        <caption>Table 1: Unit Information</caption>
                        <tr class="info">
                            <th id="code">
                                Code
                            </th>
                            <th id="units">
                                Units
                            </th>
                            <th id="credits">
                                Credit points
                            </th>
                            <th id="type">
                                Type
                            </th>
                        </tr>
                        <tr class="success" data-ng-repeat="subject in course">
                            <td headers="code">
                                {{subject.Codes}}
                            </td>
                            <td headers="units" data-ng-repeat="subject in Units | orderBy = 'Units'">
                                {{subject.Units}}
                            </td>
                            <td headers="credits">
                                {{subject.Credits | number:2}}
                            </td>
                            <td headers="type">
                                {{subject.Type}}
                            </td>
                        </tr>
                    </table>
                </div>
            </div>

AngularJS / appunits4.js

    var app = angular.module("myApp", []);

app.controller ("getCtrl", function ($scope, $http) {
    $http.get('data/course.json').then (
        // Successful response
        function(response) {
            $scope.course = response.data;
            $scope.status = response.status;
        },
        // Bad response
        function(response) {
            $scope.status = response.status || "File not found";
        }        
    );
});

简要JSON数据代码：data / course.json

[
{
    "Codes"     : "ICT10001",
    "Units"     : "Problem Solving with ICT",
    "Credits"   : "12.5",
    "Type"      : "Core"
},            
{
    "Codes"     : "COS10005",
    "Units"     : "Web Development",
    "Credits"   : "12.5",
    "Type"      : "Core"
},
{
    "Codes"     : "INF10003",
    "Units"     : "Introduction to Business Information System",
    "Credits"   : "12.5",
    "Type"      : "Core"
},
{
    "Codes"     : "INF10002",
    "Units"     : "Database Analysis and Design",
    "Credits"   : "12.5",
    "Type"      : "Core"
},
{
    "Codes"     : "COS10009",
    "Units"     : "Introduction to Programming",
    "Credits"   : "12.5",
    "Type"      : "Core"
    }
]

Answer 1

使用此代替您的HTML代码

 <tr class="success" data-ng-repeat="subject in course| orderBy:'Units'">
                                <td headers="code">
                                    {{subject.Codes}}
                                </td>
                                <td headers="units" >
                                    {{subject.Units}}
                                </td>
                                <td headers="credits">
                                    {{subject.Credits | number:2}}
                                </td>
                                <td headers="type">
                                    {{subject.Type}}
                                </td>
                            </tr>

Answer 2

也许使用像angular-datatables这样的插件？

See here

Answer 3

您正在使用 orderBy ，

应使用AngularJS documentation

中提到的

orderBy 子句

{{orderBy_expression | orderBy：expression：reverse：comparator}}

尝试以下代码：

<td headers="units" data-ng-repeat="subject in Units | orderBy : 'Units'">
                                                               /\
                                                               ||
                                                               ||
                                                               ||

它应该是冒号:而不是分配=运算符。

注意：请务必检查浏览器的控制台是否有错误消息，它会帮助您确定

使用AngularJS

3 个答案: