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


Posted in Javascript onJanuary 23, 2016

主页面:

<button ng-click="loadCourse()">Load Course</button>
<button ng-click="toggleAddCourse(true)">Add New Course</button>
<ng-includce src="'course_list.html'"></ng-include>
<ng-include src="'add_course.html'" ng-show="toggleAddCourseView"></ng-include>
<ng-include src="'edit_course.html'" ng-show="toggleEditCourseView"></ng-include>

以上,页面上显示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,添加多条数据

控制器

$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 列表

<tr ng-repeat="course in courses">
<td>{{$index+1}}</td>
<td>{{course.name}}</td>
<td>{{course.category}}</td>
<td>{{course.timeline}}</td>
<td>{{course.price | currency}}</td>
<td><button ng-click="editCourse(course)">Edit</button></td>
<td><button ng-click="deleteCourse(course)">Delete</button></td>
</tr>

add_course.html 添加

<form>
<input type="text" ng-model = "course.name" />
<select ng-model="course.category">
<option>-Select-</option>
<option value="development">Development</option>
<option value="business">Business</option>
</select>
<input type="number" ng-model="course.timeline" />
<input type="number" ng-model="course.price"/>
<button ng-click="addCourse(course)">Add</button>
<button ng-click="toggleAddCourse(false)">Cancel</button>
</form>

edit_course.html 更新

<form>
<input type="text" ng-model="courseToEdit.name" />
<select ng-model ="courseToEdit.category">
<option>-select-</option>
<option value="development">Development</option>
<option value="business">Business</option>
</select>
<input type="number" ng-model="courseToEdit.timeline"/>
<input type="number" ng-model="courseToEdit.price"/>
<button ng-click="updateCourse(courseToEdit)">Update</button>
<button ng-click="toggleEditCourse(false)">Cancel</button>
</form>

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

Javascript 相关文章推荐
js获得参数的getParameter使用示例
Feb 26 Javascript
模拟一个类似百度google的模糊搜索下拉列表
Apr 15 Javascript
javascript 动态创建表格的2种方法总结
Mar 04 Javascript
基于JavaScript实现定时跳转到指定页面
Jan 01 Javascript
js滚动条平滑移动示例代码
Mar 29 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
Feb 25 Javascript
js表单登陆验证示例
Oct 19 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
Feb 10 Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
May 05 Javascript
JS事件流与事件处理程序实例分析
Aug 16 Javascript
JS实现网页烟花动画效果
Mar 10 Javascript
Vue基于localStorage存储信息代码实例
Nov 16 Javascript
jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用
Jan 23 #Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
Jan 23 #Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
Jan 23 #Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
Jan 23 #Javascript
AngularJS使用ngOption实现下拉列表的实例代码
Jan 23 #Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
Jan 23 #Javascript
javascript实现全角转半角的方法
Jan 23 #Javascript
You might like
PHP+Mysql基于事务处理实现转账功能的方法
2015/07/08 PHP
PHP的命令行命令使用指南
2015/08/18 PHP
php实现网站文件批量压缩下载功能
2015/10/28 PHP
CI框架数据库查询缓存优化的方法
2016/11/21 PHP
javascript数组的扩展实现代码集合
2008/06/01 Javascript
javascript预览上传图片发现的问题的解决方法
2010/11/25 Javascript
动态加载js和css(外部文件)
2013/04/17 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
2013/04/19 Javascript
javascript模拟地球旋转效果代码实例
2013/12/02 Javascript
javascript贪吃蛇完整版(源码)
2013/12/09 Javascript
EasyUI中datagrid在ie下reload失败解决方案
2015/03/09 Javascript
AngularJS实现一次监听多个值发生的变化
2016/08/31 Javascript
bootstrap table复杂操作代码
2016/11/01 Javascript
Extjs让combobox写起来简洁又漂亮
2017/01/05 Javascript
Angular的$http的ajax的请求操作(推荐)
2017/01/10 Javascript
vue 开发一个按钮组件的示例代码
2018/03/27 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
2018/08/22 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
2019/01/16 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
2019/12/17 Javascript
Python使用random和tertools模块解一些经典概率问题
2015/01/28 Python
深入讲解Python编程中的字符串
2015/10/14 Python
python实现微信接口(itchat)详细介绍
2017/10/23 Python
详解python列表生成式和列表生成式器区别
2019/03/27 Python
python scipy卷积运算的实现方法
2019/09/16 Python
python实现淘宝购物系统
2019/10/25 Python
python+opencv实现移动侦测(帧差法)
2020/03/20 Python
Python项目跨域问题解决方案
2020/06/22 Python
详解使用scrapy进行模拟登陆三种方式
2021/02/21 Python
英国100%防污和防水的靴子:Muck Boot Company
2020/09/08 全球购物
党校培训自我鉴定范文
2014/03/20 职场文书
《将心比心》教学反思
2014/04/08 职场文书
企业委托书范本
2014/09/13 职场文书
2015年人事科工作总结
2015/04/28 职场文书
中国古代史学名著《战国策》概述
2019/08/09 职场文书
Python中递归以及递归遍历目录详解
2021/10/24 Python
mysql自增长id用完了该怎么办
2022/02/12 MySQL