使用 AngularJS 从单独的 JSON 文件中订购 table 数据
Ordering table data from separate JSON file by using AngularJS
我正在尝试根据从 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"
}
]
也许使用像 angular-datatables 这样的插件?
您使用的 orderBy 不正确,
orderBy 子句应按 AngularJS documentation
中所述使用
{{ orderBy_expression | orderBy : expression : reverse : comparator}}
试试下面的代码:
<td headers="units" data-ng-repeat="subject in Units | orderBy : 'Units'">
/\
||
||
||
应该是冒号:
而不是赋值=
运算符。
注意:始终检查浏览器的控制台是否有错误消息,它肯定会对您有所帮助
使用这个代替您的 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>
我正在尝试根据从 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"
}
]
也许使用像 angular-datatables 这样的插件?
您使用的 orderBy 不正确,
orderBy 子句应按 AngularJS documentation
中所述使用{{ orderBy_expression | orderBy : expression : reverse : comparator}}
试试下面的代码:
<td headers="units" data-ng-repeat="subject in Units | orderBy : 'Units'">
/\
||
||
||
应该是冒号:
而不是赋值=
运算符。
注意:始终检查浏览器的控制台是否有错误消息,它肯定会对您有所帮助
使用这个代替您的 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>