Reverse list in ng-repeat - angularjs

So I have an array that I'm using ng-repeat to render out but I want to reverse this list. Previously I have used a filter which i got from this answer: angular ng-repeat in reverse
But now I get an error: "TypeError: Object # has no method 'slice'
at Scope." I'm not sure if this is because of a new version of AngularJS or I'm missing something.
This is my filter code:
.filter('reverse', function () {
return function(items) {
return items.slice().reverse();
};
This is the code from my view from inside the div:
data-ng-repeat='feed in feeds | reverse'

To make the array render in reverse and ordered by 'id', this should work:
data-ng-repeat="feed in feeds | orderBy:'id':true"
Let me know if that works for you.
For your reference: http://jsfiddle.net/byizzy/pgPVU/3/

This is a bit tricky, but for all the people interested in reversing an array without creating new predicate functions and/or modifying the array etc...
ng-repeat="feed in feeds | orderBy:'':true"
or
ng-repeat="feed in feeds | orderBy:'-'"
EXPLANATION
if you leave the second parameter a blank string, then Angular will sort by the default order of the array (index), adding true at the end will enable the reverse parameter of Angular' orderBy

Please use directly Java-script slice function with reverse like this:
data-ng-repeat="item in items.slice().reverse()"

What is the structure of a single feed? It seems you can use the built-in filter from angular to order it the way you want. For example, if the field "id" is what provides "order" in the array, you would do this:
data-ng-repeat='feed in feeds | orderBy:id'
If you want that reversed, you just do:
data-ng-repeat='feed in feeds | orderBy:id:reverse'
Does that make sense? Not sure you need your own filter. If that is the case, perhaps try debugging (i.e. write to the console or otherwise) to see what you are actually being passed. If it is not an array, that's your problem, otherwise try this instead:
return Array.prototype.slice.call(items).reverse();
Let me know if either of those work for you!

Hope this will solve your problem
data-ng-repeat='feed in feeds.reverse()'

a solution which doesn't sort the array, but only copies and reverses it:
ng-repeat="item in items | orderBy : '[]': true"

Another Alternative Way to Achieve the AngularJs Reverse is
<div ng-repeat="item in items | orderBy:'$index':true">
<code>{{item.id}} - {{item.name}}</code>
</div>

Related

How can I access an element of an associative Array in handlebars with dynamic id?

I am currently trying to access an associative array inside of an emberjs handlebars file. Accessing through hardcoded values is no problem, but I want to get the element based on a dynamic "index".
The code I have so far is
{{#each this.model.ambient as |sound|}}
<Ambientsound #buttonActive={{soundPlayers.[Bells]}} #sound={{sound}} #updateFunction={{action "updateSound"}}/>
{{/each}}
and the relevant section of the controller is:
soundPlayers: {"Bells":100,"Fireplace":30}
The code I have above works perfectly fine, but now I am trying to access the soundPlayers.[...] based on the value of sound.id, like so:
{{#each this.model.ambient as |sound|}}
<Ambientsound #buttonActive={{soundPlayers.[sound.id]}} #sound={{sound}} #updateFunction={{action "updateSound"}}/>
{{/each}}
The Value in sound.id is passed as a string and there's nothing I can do about that.
How can I cast sound.id into something that allows me to access the array, or phrase the handlebars query in a way so I can get the result from the array? I could also consider reshaping the array I have in my controller. Anything that helps is welcome!
First you should do {{soundPlayers.Bells}}.
Next you can use the get helper:
<Ambientsound #buttonActive={{get soundPlayers sound.id}} #sound={{sound}} #updateFunction={{action "updateSound"}}/>

How to read array element (json) in Angular

I have a var called $scope.informationData and the contents (as output by console.log) is like this:
{"completed":100,"pending":50,"defects":20,"overdue":10}
If I, in my HTML, use this though:
<div class="huge">{{ informationData.overdue }}</div>
Then it's empty. I don't think there's anything wrong with the binding though because if I do {{ informationData }} then it outputs the same JSON as above.
I think I'm just using the wrong syntax to read the data - what do I need to change informationData.overdue to in order to see the number 10 appear?
Deserialize the json
$scope.informationData = angular.fromJson($scope.informationData);
You should put your value in quotes not your keys.
Change your json like this::
{"completed":"100","pending":"50","defects":"20","overdue":"10"}
Or
{completed:"100",pending:"50",defects:"20",overdue:"10"}

angular-foundation and angular-translate: apply translation into attribute back-text

I'm using angular-translation and angular-foundation modules with AngularJS and have defined Foundation top-bar like this:
<top-bar custom-back-text="true" back-text="My back text">
[...]
</top-bar>
I need to apply translate filter to My back text. Already tried these two solutions but with no success:
example 1 - CODE
<top-bar custom-back-text="true" back-text="'BACK.KEY' | translate">
example 1 - TEXT IN MENU
BACK.KEY
example 2 - CODE
<top-bar custom-back-text="true" back-text="{{ 'BACK.KEY' | translate }}">
example 2 - TEXT IN MENU
'BACK.KEY' | translate
Do I something wrong or is there no possibility to achieve this with these two modules?
Used versions
angular-translate: 2.4.2
angular-foundation: 0.5.1
If you check the js source code of foundation you will find this piece of code that handles back button
if (settings.custom_back_text == true) {
$('h5>a', $titleLi).html(settings.back_text);
} else {
$('h5>a', $titleLi).html('« ' + $link.html());
}
$dropdown.prepend($titleLi);
So it creates new element and adds to dropdown, result of which is that it copies the value you specified in the back_text. By that time "translate" is not resolved so it copies whatever you put there.
A quick hack to do to solve it you could listen for language change by doing
$rootScope.$on("$translateChangeSuccess", function...
As you can see in the piece of code from foundation.js it creates "a" element inside "h5", so you can do something like this
$rootScope.$on("$translateChangeSuccess", function(){
angular.element(".dropdown h5>a").html($filter('translate')('BACK'))
})
where "BACK" is the key used for translation.
But keep in mind that it's not a good practice to manipulate DOM inside controller, so you may create directive for that.
Though there may be better way to achieve it, this could be just quick hack to do the thing.

Stop Angular from listing all from database?

I have a simple Angular Script which works like ajax to return search results, but when I don't type anything into the search box, it lists all of the data in the data base, how do I stop this?
My script is here: http://www.elliottcoe.com/search/search.js
instead of just validating with null check for empty string
if($scope.keywords==null || $scope.keywords.trim()==""){
$scope.trustedExample = $sce.trustAsHtml("<p>Please enter some text in search field</p>");
}
You can use a built in filter limitTo: <Any Limitation Number>
limitTo docs

How to implement pagination in Angular when collection size is changing

I am trying to use angular-UI pagination for a table, where I am splicing the array where the page intersects the array. However I am not clear how to handle the fact that the array of objects is being added to and deleted to from within the table itself.
Also, I am sorting through a filter by the name property of an object in my ng-repeat. I expect what's is item[0] in my model array, does not correlate with the first item being displayed in the table via ng-repeat...I could be wrong.
I am just looking for advice on how to implement paging when the ng-repeat sorts the list, and the collection size is changing all the time.
Regards
I
you can try to use multiple filters at once for example:
ng-repeat="item in items | myFilter | limitTo:pageNumber*perPage | limitTo: -perPage"
This allow you to use your filter first on each collection/model change, then it show last "perPage" records dependig of "pageNumber".
Please see that demo : http://plnkr.co/edit/3nqRHUySsJZwpKQiMMTm?p=preview
just set watch to yourCollection.length
ie:
$scope.$watch('yourCollection.length', function(){
$scope.bigTotalItems = $scope.yourCollection.length;
}
)

Resources