我希望能够跟踪用户对某个项目的点击，并让它更新与其关联的 JSON 对象并显示所有点击的次数。我知道如何创建和删除对象，但是如何添加新名称和值并在用户单击适当的投票按钮时更新对象？任何帮助将不胜感激，我提前感谢您。
HTML
<body ng-controller="mainController">
<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>
</body>
模型
var mongoose = require('mongoose');
module.exports = mongoose.model('Todo', {
text : String,
done : Boolean
});
服务
angular.module('todoService', [])
// super simple service
// 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
var Todo = require('./models/todo');
module.exports = function(app) {
// api ---------------------------------------------------------------------
// get all todos
app.get('/api/todos', function(req, res) {
// use mongoose to get all todos in the database
Todo.find(function(err, todos) {
// if there is an error retrieving, send the error. nothing after res.send(err) will execute
if (err)
res.send(err)
res.json(todos); // return all todos in JSON format
});
});
// 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);
// get and return all the todos after you create another
Todo.find(function(err, todos) {
if (err)
res.send(err)
res.json(todos);
});
});
});
// delete a todo
app.delete('/api/todos/:todo_id', function(req, res) {
Todo.remove({
_id : req.params.todo_id
}, function(err, todo) {
if (err)
res.send(err);
// get and return all the todos after you create another
Todo.find(function(err, todos) {
if (err)
res.send(err)
res.json(todos);
});
});
});
// application -------------------------------------------------------------
app.get('*', function(req, res) {
res.sendfile('./public/index.html'); // load the single view file (angular will handle the page changes on the front-end)
});
};
客户端 Angular
angular.module('todoController', [])
// inject the Todo service factory into our controller
.controller('mainController', function($scope, $http, Todos) {
$scope.formData = {};
$scope.loading = true;
// GET =====================================================================
// when landing on the page, get all todos and show them
// use the service to get all the todos
Todos.get()
.success(function(data) {
$scope.todos = data;
$scope.loading = false;
});
// CREATE ==================================================================
// when submitting the add form, send the text to the node API
$scope.createTodo = function() {
$scope.loading = true;
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
});
}
};
// DELETE ==================================================================
// delete a todo after checking it
$scope.deleteTodo = function(id) {
$scope.loading = true;
Todos.delete(id)
// if successful creation, call our get function to get all the new todos
.success(function(data) {
$scope.loading = false;
$scope.todos = data; // assign our new list of todos
});
};
});
最佳答案
这就是你要做的。
向架构添加一个新字段来存储投票:
votes: {type: Number, default: 0}
在服务器端添加一个新的处理程序，以在收到请求时增加投票:
app.get('/api/todos/:todo_id/vote', function(req, res) {
Todo.update({_id: req.params.todo_id}, { $inc: {votes: 1} } ), function(err,doc){
...
}
}
向 AngularJS 服务添加一个新函数来调用这个新的 API 处理程序:
vote: function(id) {
return $http.get('/api/todos/' + id + '/vote');
}
连接 ngClick ngRepeated 元素以调用新的 Svc 函数。 注意:您需要在您的作用域中使用 Todos svc 来执行此操作，如下所示，否则在作用域中创建一个包装函数，就像您所做的那样。
<td>
<button data-ng-click="Todos.vote(todo._id)"
class="btn.." alt="Up vote this....">Vote
</button>
</td>
然后以某种方式在您的 View 中显示回来的待办事项模型的新“投票”字段。
看看这个:http://meanjs.org/你可以得到很多使用 Angular、node 和 Mongo 的好例子，看看它附带的“文章”模块。
我没有尝试过任何这些，但它应该可以让您了解该怎么做。另外，请意识到这里没有什么可以阻止用户多次投票。希望能帮助到你!
关于javascript - 使用 AngularJS 跟踪和统计点击次数并发布到 MongoDB，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24715213/