Question

我有一个简单的待办事项列表应用程序，其中node.js，angular.js，mongoDB和mongoose作为对象建模。我希望能够将新添加的项目插入列表顶部而不是底部。我认为这是一个Angular.js前置问题，但在进一步阅读时，这是因为数据存储在一个对象中。有没有办法从上到下排序？它是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
});

Answer 1

要查看从Mongo回来的订单，请在您的视图html中放置<pre>{{todos}}</pre>，看看它们是否按照您的要求排序。然后你应该知道是否是Mongo或Angular问题。

对于简单的修复，您可以在mongoose架构中添加默认日期：

time: {type: Date, default: Date.now }

然后在Angular视图中将orderBy子句添加到ngRepeat指令以对此字段进行排序

<tr ng-repeat="todo in todos | orderBy: '-time'">

这种方式在您的控制器中，您可以担心获取数据本身和视图将在更新时自动对其中的任何内容进行正确排序。您也可以给用户切换按钮按最新或最旧的

排序

Answer 2

首先，我强烈建议您在帖子方法中放弃Todo.find。而只是在post方法中从服务器端todo返回回调中的Todo.create。

其次，请勿在客户端$scope.todos重新分配Todos.create。如果您只是发送回您发布的一个对象，您将能够使用todos.unshift(todo)客户端并将最新的待办事项放在列表顶部。

最后，您需要在todo mongoose模式中添加某种序数，并使用排序来确保在服务器列表服务器时顺序是您喜欢的。

这是您的服务器端代码返回新插入的待办事项。

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);

});

这是你的客户端代码，将帖子的响应插回到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
            });
    }
};

使用Angular.js将mongoDB对象中的项目从上到下排列到列表中

2 个答案: