1
我在模型中有一個屬性'orderNumber'的化身的集合。我需要我的頭像集合以'orderNumber'字段進行排序。每個對象都有它的orderNumber，如果你改變了robomongo中Object的orderNumber，例如，由於它的'orderNumber'編號，對象交換。按屬性排序對象AngularJS
這裏是我的模型：
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>