javascript - AngularJS 在 ng-repeat 中的反向 OrderBy 返回非反向链接

Question

所以，我刚刚发布了一个 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 .

谢谢!

Answer 1

为什么$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}}">