使用 AngularJS 从单独的 JSON 文件中订购 table 数据

Question

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

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

非常感谢您提供的任何建议，非常感谢！

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

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

See here

Answer 2

您使用的 orderBy 不正确，

orderBy 子句应按 AngularJS documentation

中所述使用

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

试试下面的代码：

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

应该是冒号:而不是赋值=运算符。

注意：始终检查浏览器的控制台是否有错误消息，它肯定会对您有所帮助

Answer 3

使用这个代替您的 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>

使用 AngularJS 从单独的 JSON 文件中订购 table 数据

Ordering table data from separate JSON file by using AngularJS

html

angularjs

database

angularjs-scope