Sort objects by property AngularJS - angularjs

Question

I have a collection of avatars with a property 'orderNumber' in model. I need my collection of avatars to sort by 'orderNumber' field. Each object has it's orderNumber and if you change orderNumber of Object in robomongo for example, objects swaps due to its 'orderNumber' number.
Here is my model:
var mongoose = require('mongoose');
var Schema = mongoose.Schema;
var CollectionSchema = new Schema({
name: {
type: String,
required: 'Name is required!'
},
description: {
type: String
},
orderNumber:{
type: Number
},
defaultAvatar: [{
type: Schema.Types.ObjectId,
ref: 'Part'
}],
designer_id: {
type: Schema.Types.ObjectId,
ref: 'Designer'
},
pipeline: [{
name: {
type: String,
required: 'Pipeline step name is required!'
},
zoom: Boolean,
templates: [{
name: {
type: String,
required: 'Template name is required!'
},
parts: [{
type: Schema.Types.ObjectId,
ref: 'Part'
}]
}]
}]
});
module.exports = mongoose.model('Collection', CollectionSchema);>
Here is my controller
(function () {
'use strict';
angular
.module( 'mainApp' )
.controller( 'simpleACController', simpleACController );
function simpleACController( $scope, $location, $compile, $localStorage, CanvasRendererFactory, WrapUnwrapFactory,
PremadeAvatarManager, PartsFactory, AvatarConstructorFactory, UserAvatarsFactory,
JqueryRenderFactory, UserFactory ) {
var vm = this; // ViewModel, you are free of controller's name in html
var canvas = new fabric.StaticCanvas( '' );
vm.showPreviousButton = false;
vm.showNextButton = true;
var savedAvatarMiniatures = [];
var savedPipelineNumber;
// var canvas = new fabric.StaticCanvas( 'simpleAvatarCanvas' );
var pipelineNumber; // -1
var previousPipeline;
var selectedType;
var selectedIndex = 0;
var previousIndex = 0;
var miniatureCarousel;
var avatarCarousel;
var transitionInProgress = false;
vm.avatars = [];
var initialAvatars = [];
var pipelineNames = {};
var pipelineZooms;
vm.select = function ( index ) {
savedAvatarMiniatures = vm.avatars;
selectedIndex = index;
if (pipelineNumber == -1) {
selectedType = index;
}
var wasSelected = vm.avatars[index].selected;
for (var i = 0; i < vm.avatars.length; i++) {
vm.avatars[i].selected = false;
}
vm.avatars[index].selected = !wasSelected;
if (pipelineNumber == -1) {
vm.avatarName = vm.avatars[index].name;
}
vm.showPreviousButton = ( index != 0 );
vm.showNextButton = ( index != (vm.avatars.length - 1) );
};
vm.selectNext = function () {
previousIndex = selectedIndex;
if (selectedIndex < vm.avatars.length - 1) {
changeMiniatureCarousel( ++selectedIndex );
}
};
vm.selectPrevious = function () {
previousIndex = selectedIndex;
if (selectedIndex > 0) {
changeMiniatureCarousel( --selectedIndex );
}
};
vm.onMiniatureClick = function ( index ) {
if (!transitionInProgress) {
vm.select( index );
}
};
vm.prevPipeLine = function () {
var avatar = getSelectedAvatar();
if (avatar != null) {
if (pipelineNumber < getPipelineCount( avatar )) {
previousPipeline = pipelineNumber;
pipelineNumber--;
updatePipeline();
} else {
pipelineNumber--;
}
vm.switchCarousel( true );
}
updateText();
};
vm.nextPipeLine = function () {
if (getSelectedAvatar() != null) {
previousPipeline = pipelineNumber;
pipelineNumber++;
updatePipeline();
}
updateText();
};
vm.showCarousel = true;
vm.switchCarousel = function ( flag ) {
vm.showCarousel = flag;
};
vm.saveAvatar = function () {
if (!UserFactory.IsLoggedIn()) {
$localStorage.anonymousAvatar = getSelectedAvatar();
UserFactory.showLoginModal( function () {
save();
}, function ( err ) {
console.log( 'saveAvatar Error' );
console.log( err );
} );
} else {
save();
}
function save() {
var avatar = getSelectedAvatar();
var partIds = WrapUnwrapFactory.unwrapPartIds( avatar );
UserAvatarsFactory.saveAvatar( avatar.orderNumber, vm.avatarName, partIds, function () {
$location.path( '/avatarmanager' );
$scope.$apply();
} );
}
};
vm.toFullAC = function () {
if (!UserFactory.IsLoggedIn()) {
UserFactory.showLoginModal( function () {
toFullAC( getSelectedAvatar() );
}, function ( err ) {
console.log( 'toFullAC Error' );
console.log( err );
} );
} else {
toFullAC( getSelectedAvatar() );
}
};
function changeMiniatureCarousel( index ) {
refresh( index );
miniatureCarousel.trigger( 'to.owl.carousel', [index] );
}
function selectMiniatureCarousel() {
var index = ( pipelineNumber == -1 && selectedType != undefined ) ? selectedType : 0;
changeMiniatureCarousel( index )
}
function getSelectedAvatar() {
var avatar = null;
if (vm.avatars.length > 0) {
for (var i = 0; i < vm.avatars.length; i++) {
if (vm.avatars[i].selected == true) {
avatar = vm.avatars[i];
}
}
}
return avatar;
}
function updatePipeline() {
var avatar = getSelectedAvatar();
if (avatar) {
if (pipelineNumber < getPipelineCount( avatar )) {
updateMiniatures( avatar ).then( function () {
return true;
} );
} else {
if (!UserFactory.IsLoggedIn()) {
updateViewModel();
vm.switchCarousel( false );
} else {
toFullAC( avatar );
}
}
}
return false;
}
function updateText() {
var avatar = getSelectedAvatar();
if (pipelineNames.length != 0) {
var names = ['type'];
for (var i = 1; i < pipelineNames[avatar.orderNumber].length; i++) {
names.push( pipelineNames[avatar.orderNumber][i] );
}
if (pipelineNumber > -2) {
vm.heading = 'Select avatar ' + names[pipelineNumber + 1];
}
if (pipelineNumber >= getPipelineCount( avatar )) {
vm.heading = "Your avatar is ready! Save?"
}
}
}
function getPipelineCount( avatar ) {
return PremadeAvatarManager.getPipelineCount( avatar );
}
function updateCarousels() {
renderAvatars();
renderMiniatures();
bindCarousels();
}
function renderMiniatures() {
var slideCount = 6;
slideCount = ( vm.avatars.length < slideCount ) ? vm.avatars.length : slideCount;
var settings = {
array: vm.avatars,
imageProperty: 'premade',
type: 'canvas',
width: 150,
height: 100,
vmArray: 'simpleAC.avatars',
oldCarousel: '#simpleACcarousel',
carouselRoot: '#miniatures-carousel-root',
containerClass: "as-slider",
containerID: "simpleACcarousel",
divClick: ' ng-click="simpleAC.onMiniatureClick',
slideCount: slideCount,
centerMode: false,
needsText: true,
selectable: true
};
var divNroot = JqueryRenderFactory.render( settings, $scope, $compile );
miniatureCarousel = divNroot.div;
//divNroot.root.append( miniatureCarousel );
$compile( divNroot.root )( $scope );
CanvasRendererFactory.renderAvatarsToCanvasesInCarousel( vm.avatars, miniatureCarousel );
miniatureCarousel.owlCarousel( {
responsive: {
0: {
items: 5,
},
1439: {
items: 7,
}
},
animateIn: 'fadeIn',
animateOut: 'fadeOut',
center: true,
loop: false,
margin: 10,
mouseDrag: false,
touchDrag: false,
nav: false
} );
}
function renderAvatars() {
var slideCount = 3;
slideCount = ( vm.avatars.length - 1 < slideCount ) ? 1 : slideCount;
var settings = {
array: vm.avatars,
imageProperty: 'premade',
type: 'canvas',
width: 480,
height: 320,
vmArray: 'simpleAC.avatars',
oldCarousel: '#simpleACavatarCarousel',
carouselRoot: '#avatars-carousel-root',
containerClass: "ag-slider",
containerID: "simpleACavatarCarousel",
divClick: ' ',
slideCount: slideCount,
centerMode: true,
needsText: false,
selectable: false
};
var divNroot = JqueryRenderFactory.render( settings, $scope, $compile );
avatarCarousel = divNroot.div;
//divNroot.root.append( avatarCarousel );
$compile( divNroot.root )( $scope );
CanvasRendererFactory.renderAvatarsToCanvasesInCarousel( vm.avatars, avatarCarousel );
avatarCarousel.owlCarousel( {
animateIn: 'fadeIn',
animateOut: 'fadeOut',
items: 5,
center: true,
loop: false,
margin: 10,
mouseDrag: false,
touchDrag: false,
nav: false
} );
var items = $( '.owl-item' );
items.removeClass( 'medium' );
items.eq( 1 ).addClass( 'medium' );
avatarCarousel.on( 'translate.owl.carousel', function ( e ) {
var index = e.item.index;
var items = $( '.owl-item' );
items.removeClass( 'medium' );
items.eq( index - 1 ).addClass( 'medium' );
items.eq( index + 1 ).addClass( 'medium' );
} );
}
function renderCanvasesInCarousel( carousel ) {
var canvasArray = carousel.find( "canvas" );
for (var i = 0; i < vm.avatars.length; i++) {
var canvas = new fabric.StaticCanvas( canvasArray[i] );
canvasArray[i].removeAttribute( 'style' );
WrapUnwrapFactory.unwrapAvatar( vm.avatars[i], {x: canvas.width, y: canvas.height},
function ( canvas ) {
return function ( array ) {
CanvasRendererFactory.drawAvatar( canvas, array );
}
}( canvas )
);
}
}
function bindCarousels() {
var changing = false;
var changed;
var duration = 300;
avatarCarousel.on( 'changed.owl.carousel', function ( e ) {
if (!changing) {
changing = true;
miniatureCarousel.trigger( 'to.owl.carousel', [e.item.index, 0] );
changing = false;
}
} );
miniatureCarousel.on( 'click', '.owl-item', function () {
if (!transitionInProgress) {
var index = $( this ).index();
avatarCarousel.trigger( 'to.owl.carousel', [index, 0] );
}
} );
miniatureCarousel.on( 'translate.owl.carousel', function ( e ) {
transitionInProgress = true;
} );
miniatureCarousel.on( 'translated.owl.carousel', function ( e ) {
transitionInProgress = false;
} );
miniatureCarousel.on( 'changed.owl.carousel', function ( e ) {
if (!changing) {
changing = true;
avatarCarousel.trigger( 'to.owl.carousel', [e.item.index, 0] );
refresh( e.item.index );
if (!$scope.$$phase) {
$scope.$apply();
}
changing = false;
}
} );
}
function initpipelineNames() {
vm.avatars.forEach(function(avatar) {
var resultArray = [];
PremadeAvatarManager.getPipeline(avatar).forEach(function(pipeline) {
resultArray.push(pipeline.name);
});
pipelineNames[avatar.orderNumber] = resultArray;
});
AvatarConstructorFactory.SimpleACpipelineNames( pipelineNames );
}
function updateViewModel() {
vm.backButtonHidden = ( pipelineNumber == -1 );
}
function updateMiniatures( avatar ) {
return new Promise( function ( resolve ) {
PremadeAvatarManager.getAvatarArray( avatar, pipelineNumber ).then( function ( collection ) {
vm.avatars = collection;
console.log(avatars);
if (pipelineNumber == -1) {
initialAvatars = collection;
}
// var index = ( pipelineNumber == -1 && selectedType != undefined ) ? selectedType : 0;
updateViewModel();
updateAvatarConstructorFactory();
updateCarousels();
selectMiniatureCarousel();
switchZoom();
if (!$scope.$$phase) {
$scope.$apply();
}
resolve()
} );
} );
//return (vm.avatars != undefined);
}
function changeLocationAfterLoaded( avatar ) {
AvatarConstructorFactory.SelectedAvatarToFullAC( avatar );
$location.path( '/fullac' );
if (!$scope.$$phase) {
$scope.$apply();
}
}
function toFullAC( avatar ) {
var defaultTypes = PartsFactory.getDefaultPartTypes( avatar.orderNumber );
var avatarTypes = WrapUnwrapFactory.unwrapTypes( avatar );
var filtered = _.filter( defaultTypes, function ( type ) {
return avatarTypes.indexOf( type ) >= 0; // contains
} );
var typesStack = PartsFactory.getPartsByTypeArray( avatar.orderNumber, filtered );
AvatarConstructorFactory.TypesStack( typesStack );
changeLocationAfterLoaded( avatar );
}
function refresh( index ) {
index = ( index == undefined ) ? 0 : index;
if (vm.avatars[index].selected) {
vm.select( index );
}
vm.select( index );
}
function updateAvatarConstructorFactory() {
AvatarConstructorFactory.SimpleACavatarMiniatures( vm.avatars );
AvatarConstructorFactory.SimpleACpipelineNumber( pipelineNumber );
}
function switchZoom() {
var items = $( '.avatar-gallery .owl-item' );
if (pipelineNumber > -1 && pipelineZooms == undefined) {
var avatar = getSelectedAvatar();
var collection = PartsFactory.findCollection( avatar.orderNumber);
pipelineZooms = [];
collection.pipeline.forEach( function ( pipeline ) {
if (pipeline.zoom) {
pipelineZooms.push( true );
} else {
pipelineZooms.push( false );
}
} );
setZoom();
} else if (pipelineNumber > -1) {
setZoom();
}
function setZoom() {
if (pipelineZooms[pipelineNumber + 1]) {
items.addClass( 'zoom' );
} else {
items.removeClass( 'zoom' );
}
}
}
function activate() {
PartsFactory.registerCollectionObserverCallback( internalActivate );
if (PartsFactory.areCollectionsInitialized()) {
internalActivate();
}
function internalActivate() {
if (!AvatarConstructorFactory.isInit()) {
pipelineNumber = -1;
updateMiniatures().then( function () {
initpipelineNames();
updateText();
if (!$scope.$$phase) {
$scope.$apply();
}
vm.selectNext()
} )
} else {
updateViewModel();
pipelineNumber = AvatarConstructorFactory.SimpleACpipelineNumber();
vm.avatars = AvatarConstructorFactory.SimpleACavatarMiniatures();
pipelineNames = AvatarConstructorFactory.SimpleACpipelineNames();
updateCarousels();
selectMiniatureCarousel();
switchZoom();
updateText();
refresh();
if (!$scope.$$phase) {
$scope.$apply();
}
vm.selectNext()
}
}
}
activate();
}
})();
and the view
<div ng-controller="simpleACController as simpleAC" class="inner-bg clearfix">
<div class="inner avatar-generator">
<div class="character-bg">
<div class="layer-one"></div>
<div class="layer-two"></div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="avatar-gallery">
<div class="controls">
<div class="add-name">
<form action="">
<input type="text"
class="cell"
ng-hide="simpleAC.showCarousel"
ng-model="simpleAC.avatarName">
</form>
</div>
</div>
<div class="ag-controls">
<i class="ag-prev" ng-show="simpleAC.showCarousel && simpleAC.showPreviousButton"
ng-click="simpleAC.selectPrevious()">prev</i>
<i class="ag-next" ng-show="simpleAC.showCarousel && simpleAC.showNextButton"
ng-click="simpleAC.selectNext()">next</i>
</div>
<div id="avatars-carousel-root"></div>
</div>
</div>
</div>
<div class="avatar-details">
<div class="container">
<div class="title">
<span class="back button"
ng-hide="simpleAC.backButtonHidden"
ng-click="simpleAC.prevPipeLine()">back</span>
<h2 ng-bind="simpleAC.heading">Select avatar type</h2>
<span class="next button"
ng-show="simpleAC.showCarousel"
ng-click="simpleAC.nextPipeLine()">next</span>
</div>
<div class="avatar-styles">
<div ng-show="simpleAC.showCarousel">
<div class="as-controls">
<i class="as-prev" ng-show="simpleAC.showPreviousButton"
ng-click="simpleAC.selectPrevious()">prev</i>
<i class="as-next" ng-show="simpleAC.showNextButton" ng-click="simpleAC.selectNext()">next</i>
</div>
<div id="miniatures-carousel-root">
</div>
</div>
<div ng-show="!simpleAC.showCarousel">
<div class="done-controls">
<a class="btn fakelink" ng-click="simpleAC.toFullAC()">Edit details</a>
<a class="btn button-blue fakelink" ng-click="simpleAC.saveAvatar()">Save</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

You can sort your collection with the angular's filter "orderBy".
Ref : http://justinklemm.com/angularjs-filter-ordering-objects-ngrepeat/
If you want use this filter in javascript and not on ng-repeat
$filter('orderBy')(array, expression, reverse)
https://docs.angularjs.org/api/ng/filter/orderBy