我在模型中有一个属性为"orderNumber"的化身集合。我需要我的头像集合按"orderNumber"字段排序。每个对象都有其orderNumber，例如，如果您在robomongo中更改对象的orderNumber，则对象会因其"orderNumber"编号而交换。
这是我的型号：
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);>
这是我的控制器
(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();
}
})();
和视图
<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>
您可以使用angular的过滤器"orderBy"对集合进行排序。
参考编号：http://justinklemm.com/angularjs-filter-ordering-objects-ngrepeat/
如果你想在javascript中使用这个过滤器，而不是在ng上重复
$filter('orderBy')(array, expression, reverse)
https://docs.angularjs.org/api/ng/filter/orderBy