AngularJS:数组上的 orderBy 不起作用
AngularJS : orderBy on array not working
我正在尝试订购我在前端显示的列表。这是 json 我从我的 angular 控制器传递它:
我正在向它传递一个数组,其中填充了一些这些数组。
我想按internalRanking 对列表进行排序,我可以将其设为字符串或整数,但长度不会始终相同。我试过在线查看,但我认为我不需要创建自定义过滤器,因为它正在迭代包含上述数组的一定数量的数组。我的 HTML 是:
<form class="form-inline">
<input ng-model="query" type="text" placeholder="Filter by" autofocus>
</form>
<ul ng-repeat="rankingData in allRankingData | filter:query | orderBy:allRankingData[0].entries[0].internalRanking">
<li>{{index}}</li>
<li>{{rankingData[0].entries[0].playerOrTeamName}}</li>
<li>{{rankingData[0].tier}} {{rankingData[0].entries[0].division}} - {{rankingData[0].entries[0].leaguePoints}}LP</li>
<li>{{rankingData[0].entries[0].internalRanking}}</li>
</ul>
它只是没有订购任何东西。最后列表行
{{rankingData[0].entries[0].internalRanking}}
正在打印出正确的值,因此引用是正确的。
有人有什么想法吗?如有必要,我可以 post 更多代码
您可以有一个订购功能...
ng-repeat="rankingData in allRankingData | filter:query | orderBy:orderByFn"
和
$scope.orderByFn = function(item) {
return item.entries[0].internalRanking;
};
这是一个有效的 JSFiddle 示例,可以帮助您。遍历代码并观察如何使用 orderBy。另外,观察如何进行嵌套。
var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function($scope) {
$scope.people = [{
"name": "Bob Jones",
"scores": [
{date:"01/10/2010",value:40},
{date:"01/10/2014",value:41},
{date:"01/10/2011",value:43},
{date:"01/10/2014",value:49}
]
},{
"name": "Adam Johnson",
"scores": [
{date:"01/10/2013",value:39},
{date:"01/10/2015",value:31},
{date:"01/10/2013",value:32},
{date:"01/10/2011",value:21}]
},{
"name": "Mary Hills",
"scores": [
{date:"01/10/2014",value:92},
{date:"01/10/2014",value:73},
{date:"01/10/2013",value:89},
{date:"01/10/2011",value:88}]
}];
});
<div ng-controller='myCtrl'>
<ul ng-repeat="person in people">
<li>{{person.name}}</li>
<ul ng-repeat="score in person.scores | orderBy:'date'">
<li>{{score.date}}:{{score.value}}</li>
</ul>
</ul>
</div>
我正在尝试订购我在前端显示的列表。这是 json 我从我的 angular 控制器传递它:
我正在向它传递一个数组,其中填充了一些这些数组。
我想按internalRanking 对列表进行排序,我可以将其设为字符串或整数,但长度不会始终相同。我试过在线查看,但我认为我不需要创建自定义过滤器,因为它正在迭代包含上述数组的一定数量的数组。我的 HTML 是:
<form class="form-inline">
<input ng-model="query" type="text" placeholder="Filter by" autofocus>
</form>
<ul ng-repeat="rankingData in allRankingData | filter:query | orderBy:allRankingData[0].entries[0].internalRanking">
<li>{{index}}</li>
<li>{{rankingData[0].entries[0].playerOrTeamName}}</li>
<li>{{rankingData[0].tier}} {{rankingData[0].entries[0].division}} - {{rankingData[0].entries[0].leaguePoints}}LP</li>
<li>{{rankingData[0].entries[0].internalRanking}}</li>
</ul>
它只是没有订购任何东西。最后列表行
{{rankingData[0].entries[0].internalRanking}}
正在打印出正确的值,因此引用是正确的。
有人有什么想法吗?如有必要,我可以 post 更多代码
您可以有一个订购功能...
ng-repeat="rankingData in allRankingData | filter:query | orderBy:orderByFn"
和
$scope.orderByFn = function(item) {
return item.entries[0].internalRanking;
};
这是一个有效的 JSFiddle 示例,可以帮助您。遍历代码并观察如何使用 orderBy。另外,观察如何进行嵌套。
var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function($scope) {
$scope.people = [{
"name": "Bob Jones",
"scores": [
{date:"01/10/2010",value:40},
{date:"01/10/2014",value:41},
{date:"01/10/2011",value:43},
{date:"01/10/2014",value:49}
]
},{
"name": "Adam Johnson",
"scores": [
{date:"01/10/2013",value:39},
{date:"01/10/2015",value:31},
{date:"01/10/2013",value:32},
{date:"01/10/2011",value:21}]
},{
"name": "Mary Hills",
"scores": [
{date:"01/10/2014",value:92},
{date:"01/10/2014",value:73},
{date:"01/10/2013",value:89},
{date:"01/10/2011",value:88}]
}];
});
<div ng-controller='myCtrl'>
<ul ng-repeat="person in people">
<li>{{person.name}}</li>
<ul ng-repeat="score in person.scores | orderBy:'date'">
<li>{{score.date}}:{{score.value}}</li>
</ul>
</ul>
</div>