AngularJS中如何使用$http对MongoLab数据表进行增删改查

页面

rush:js;">

以上,页面显示course_list.html,add_course.html和edit_course.html的内容显示与toggleAddCourseView和toggleEditCourseView值有关,而toggleAddCourseView和toggleEditCourseView值将通过方法来控制。

在Mongolab上创建数据库和表

→ https://mongolab.com → 注册登录 → Create new → 选择Single-node

勾选SandBox,输入Database name的名称为myacademy。

→ 点击新创建的Database → 点击Add collection

名称为course

→ 点击course这个collection。 → 多次点击add document,添加多条数据

控制器

rush:js;"> $scope.courses = []; var url = "https://api.mongolab.com/api/1/databases/my-academy/collections/course?apiKey=myAPIKey"; var config = {params: {apiKey: "..."}}; $scope.toggleAddCourseNew = false; $scope.toggleEditCourseView = false; //列表 $scope.loadCourses = function(){ $http.get(url,config) .success(function(data){ $scope.courses = data; }); } //添加 $scope.addCourse = function(course){ $http.post(url,course,config) .success(function(data){ $scope.loadCourses(); }) } //显示修改 $scope.editCourse = function(course){ $scope.toggleEditCourseView = true; $scope.coursetoEdit = angular.copy(course); } //修改 $scope.updateCourse = function(coursetoEdit){ var id = coursetoEdit._id.$oid; $http.put(url + "/" + id,coursetoEdit,config) .success(fucntion(data){ $scope.loadCourses(); }) } //删除 $scope.delteCourse = function(course){ var id = course._id.$oid; $http.delete(url+ "/" + id,config) .success(function(data){ $scope.loadCourses(); }) } $scope.toggleAddCourse = function(flag){ $scope.toggleAddCourseView = flag; } $scope.toggleEditCourse = fucntion(flag){ $scope.toggleEditCourseView = flag; }

course_list.html 列表

rush:js;">

add_course.html 添加

rush:js;">

edit_course.html 更新

rush:js;">
etoEdit.timeline"/> etoEdit.price"/>

以上所述是小编给大家分享的AngularJS中如何使用$http对MongoLab数据表进行增删改查的相关知识,希望对大家有所帮助。

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...