Angular Ng-Repeat in Reverse

angular ng-repeat in reverse

I would suggest using a custom filter such as this:

app.filter('reverse', function() {
  return function(items) {
    return items.slice().reverse();
  };
});

Which can then be used like:

<div ng-repeat="friend in friends | reverse">{{friend.name}}</div>

See it working here: Plunker Demonstration

---

This filter can be customized to fit your needs as seen fit. I have provided other examples in the demonstration. Some options include checking that the variable is an array before performing the reverse, or making it more lenient to allow the reversal of more things such as strings.

angularjs - counting in reverse in ng-repeat with filtering

Currently while showing the index you are referring the unfiltered collection, therefore you can't see the filtered result count using details.length variable. Use alias filter object using as would do the trick like ng-repeat="item in item | filter: { prop: 'search' }| customFilter as filteredResult"

<tr 
  ng-repeat="det in details | orderBy:['-YEAR_READ','-UniqueCounter'] | filter:searchingFor as filtered">
    <td>{{$index + 1}}</td>
    <td>{{filtered.length - $index}}</td>
    <td>
</tr>

How to reverse the order of Angular ngRepeat by object's keys which are numeric

ng-repeat doen't work with object for it you need to create your custom filter.

 <div ng-repeat="(date,text) in data | orderObjectBy:date:true">{{text}}</div>

app.filter('orderObjectBy', function() {
  return function(items, field, reverse) {
    var filtered = [];
    angular.forEach(items, function(item) {
      filtered.push(item);
    });
    filtered.sort(function (a, b) {
      return (a[field] > b[field] ? 1 : -1);
    });
    if(reverse) filtered.reverse();
    return filtered;
  };
});

Plunker

Hope it helps :)

condition for reverse in ng-repeat

DEMO

You don't need a condition, you can use a filter for this which is orderBy

  <ul>
    <li ng-repeat='item in vm.items | orderBy: item : vm.reverse'>
      {{item}}
    </li>
  </ul>

if vm.reverse is true, it will display in the reverse order.

Documentation for orderBy

AngularJS' reverse OrderBy in ng-repeat is returning not reversed links

Why $index is finding the wrong element

$index will show you the index in the ng-repeat list, not the index in the list.json object.

What you want is a unique reference to an item in list.json.

Why you (currently) want an index to an array

Currently your routing looks like this:

.when('/job/:id',{
    controller: 'JobController',
    templateUrl: 'views/opening.html'
})

So, each job is identified by an id.

You currently produce this route by binding $index:

<a class="panel-body" href="#/job/{{$index}}">

Your id is used as an index in an array called data:

$scope.detail = data[$routeParams.id];

data is an array that looks like this:

[
{
    "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"
},

The real problem

The item upon which your ng-repeat acts is not the original array data.

Thus your ng-repeat lacks the positional information that would enable you to point to things in data.

Solution

You need a better unique index into data.

For example, if job+company constituted a "unique" index (it probably doesn't), then you could change your routing like this:

.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;

Your Angular binding would have to look like this:

Alternative solution

I suspect there is no unique index available in your current object structure.

I recommend attaching a unique UUID to each item in 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",
    "id": "51e6e313-fc64-4d1d-95d4-60af9fda2019"
},

Now you can use the id property upon any element in data.

As before, you could use just id in your routing:

.when('/job/:id'

But id would not be an index into an array; you would need to filter data on that criterion:

var matches = data.filter(function(item) {
    return item.id === $routeParams.id;
});
var firstMatch = matches[0];
$scope.detail = firstMatch;

Finally: your Angular binding would have to look like this:

<a class="panel-body" href="#/job/{{app.id}}">

---

Related Topics