所以,我刚刚发布了一个 AngularJS 工作板,其中提交的数据以 JSON 形式保存在文件中,并提供给板。在 ng-repeat 中,我设置为 OrderBy:'-time',它返回列表顶部的最新条目,但如果您看到每个条目的链接,它仍然是原始条目,是 0 最旧的条目,但它保留成为第一名。怎么解决这个问题呢?我不仅要反转列表,而且链接应坚持其相关项目。
<div class="card panel panel-default" ng-repeat="app in openings | filter:query | orderBy:'-time'">
<a class="panel-body" href="#/job/{{$index}}">
<div class="inner">
<h3 class="panel-title">{{app.job}}</h3>
<ul>
<li><span class="glyphicon glyphicon-tags"></span>{{app.type}}</li>
<li><span class="glyphicon glyphicon-briefcase"></span>{{app.company}}</li>
<li><span class="glyphicon glyphicon-globe"></span>{{app.city}}</li>
</ul>
</div>
</a>
</div>
在这种情况下,{{$index}}
不会与其余信息一起反转。
您可能会看到招聘板here 。 Github链接here .
谢谢!
最佳答案
为什么$index
找到了错误的元素
$index
将显示 ng-repeat
列表中的索引,而不是 list.json< 中的索引
对象。
您想要是对list.json
中项目的唯一引用。
为什么你(当前)想要数组的索引
目前您的路由如下所示:
.when('/job/:id',{
controller: 'JobController',
templateUrl: 'views/opening.html'
})
因此,每个作业都由一个 id
标识。
您当前通过绑定(bind) $index
生成此路由:
<a class="panel-body" href="#/job/{{$index}}">
您的 id
用作名为 data
的数组中的索引:
$scope.detail = data[$routeParams.id];
data
是一个如下所示的数组:
[
{
"job": "Full Stack Front-end Developer",
"company": "Zinga",
"city": "Tokyo",
"category": "Design",
"type": "Freelance",
"description": "Em documentos utilizados para testes, este tipo de texto \u00e9 utilizado para evitar que as pessoas foquem a aten\u00e7\u00e3o no texto e se concentrem nos aspectos visuais.",
"time": "2016-03-23T23:18:46Z"
},
真正的问题
ng-repeat
作用的项目不是原始数组data
。
因此,您的 ng-repeat
缺少使您能够指向 data
中的内容的位置信息。
解决方案
您需要一个更好的数据唯一索引
。
例如,如果 job
+company
构成了一个“唯一”索引(它可能没有),那么您可以更改您的路由如下:
.when('/job/:job/:company'
var matches = data.filter(function(item) {
return item.job === $routeParams.job
&& item.company === $routeParams.company;
});
var firstMatch = matches[0];
$scope.detail = firstMatch;
您的 Angular 绑定(bind)必须如下所示:
替代解决方案
我怀疑您当前的对象结构中没有可用的唯一索引。
我建议为 data
中的每个项目附加一个唯一的 UUID:
[
{
"job": "Full Stack Front-end Developer",
"company": "Zinga",
"city": "Tokyo",
"category": "Design",
"type": "Freelance",
"description": "Em documentos utilizados para testes, este tipo de texto \u00e9 utilizado para evitar que as pessoas foquem a aten\u00e7\u00e3o no texto e se concentrem nos aspectos visuais.",
"time": "2016-03-23T23:18:46Z",
"id": "51e6e313-fc64-4d1d-95d4-60af9fda2019"
},
现在您可以在data
中的任何元素上使用id
属性。
和以前一样,您可以在路由中仅使用 id
:
.when('/job/:id'
但是id
不会是数组的索引;您需要根据该条件过滤数据
:
var matches = data.filter(function(item) {
return item.id === $routeParams.id;
});
var firstMatch = matches[0];
$scope.detail = firstMatch;
最后:你的 Angular 绑定(bind)必须如下所示:
<a class="panel-body" href="#/job/{{app.id}}">
关于javascript - AngularJS 在 ng-repeat 中的反向 OrderBy 返回非反向链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36270614/