使用Angular.js将mongoDB对象中的项目从顶部到底部排列
我有一个简单的待办事项列表应用程序与node.js，angular.js，mongoDB和mongoose作为对象build模。 我希望能够将新添加的项目插入列表顶部而不是底部。 我以为这是一个Angular.js预先考虑的问题，但进一步阅读是因为数据存储在一个对象。 有没有办法将其从上到下sorting？ 这是一个mongoDB问题或Angular？ 任何帮助将不胜感激。 如果你需要更多的代码，我可以提供。 再次谢谢你。
HTML
<div class="table-responsive"> <table class="table"> <tr> <td>Vote</td> <td>Song</td> <td>Edit</td> </tr> <tr ng-repeat="todo in todos"> <td><button class="btn btn-success icon-thumbs-up" alt="Up vote this song if you like it.">Vote</button></td> <td>{{ todo.text }}</td> <td><button class="btn btn-danger fa fa-times" ng-click="deleteTodo(todo._id)" alt="Remove the song if you need to make an edit and then add it back."></button></td> </tr> </table> </div> API服务
// each function returns a promise object .factory('Todos', function($http) { return { get : function() { return $http.get('/api/todos'); }, create : function(todoData) { return $http.post('/api/todos', todoData); }, delete : function(id) { return $http.delete('/api/todos/' + id); } } });
一些angular度
// CREATE ================================================================== // when submitting the add form, send the text to the node API $scope.createTodo = function() { $scope.loading = true; // validate the formData to make sure that something is there // if form is empty, nothing will happen if ($scope.formData.text != undefined) { // call the create function from our service (returns a promise object) Todos.create($scope.formData) // if successful creation, call our get function to get all the new todos .success(function(data) { $scope.loading = false; $scope.formData = {}; // clear the form so our user is ready to enter another $scope.todos = data; // assign our new list of todos }); } }; // create todo and send back all todos after creation app.post('/api/todos', function(req, res) { // create a todo, information comes from AJAX request from Angular Todo.create({ text : req.body.text, done : false }, function(err, todo) { if (err) res.send(err); todos.unshift(todo); // get and return all the todos after you create another Todo.find(function(err, todos) { if (err) res.send(err) res.json(todos); }); }); });
对象模型
var mongoose = require('mongoose'); module.exports = mongoose.model('Todo', { text : String, done : Boolean });
要检查从Mongo返回的订单是什么，请将<pre>{{todos}}</pre>放入您的视图html中，并查看它们是否按照您的要求sorting。 那么你应该知道是否是Mongo或Angular的问题。
对于一个简单的修复，你可以在mongoose模式中添加默认date：
time: {type: Date, default: Date.now }
然后在Angular视图中添加orderBy子句到ngRepeat指令来sorting这个字段
<tr ng-repeat="todo in todos | orderBy: '-time'">
这样在你的控制器中，你可以担心获取数据本身，并且视图会在更新的时候自动对它们进行sorting。 你也可以给用户切换buttonsorting最新或最旧
首先，我强烈build议在你的post方法中丢弃Todo.find 。 相反，只需在服务器端Todo.create的callbackTodo.create中返回todo Todo.create 。
其次，不要在客户端$scope.todos中重新分配$scope.todos Todos.create 。 如果你只是发回你发布的一个对象，你可以使用todos.unshift(todo)客户端，并将最新的待办事项放在列表的顶部。
最后，你需要在待办事项mongoose模式中添加某种序数，并使用一种sorting来确保在待办事项列表中的顺序是你想要的。
这是你的服务器端代码返回新插入的待办事项。
app.post('/api/todos', function(req, res) { // create a todo, information comes from AJAX request from Angular Todo.create({ text : req.body.text, done : false }, function(err, todo) { if (err) res.send(err); res.json(todo); });
这里是你的客户端代码将post的回应插入到todos数组中//当提交添加表单时，将文本发送到节点API $ scope.createTodo = function（）{$ scope.loading = true;
// validate the formData to make sure that something is there // if form is empty, nothing will happen if ($scope.formData.text != undefined) { // call the create function from our service (returns a promise object) Todos.create($scope.formData) // if successful creation, call our get function to get all the new todos .success(function(data) { $scope.loading = false; $scope.formData = {}; // clear the form so our user is ready to enter another $scope.todos.unshift(data); // assign our new list of todos }); } };