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 相关文章推荐
用Javscript实现表单复选框的全选功能
May 25 Javascript
js中各浏览器中鼠标按键值的差异
Apr 07 Javascript
取得元素的左和上偏移量的方法
Sep 17 Javascript
JavaScript中双叹号!!作用示例介绍
Sep 21 Javascript
jQuery通过写入cookie实现更换网页背景的方法
Apr 15 Javascript
利用node.js搭建简单web服务器的方法教程
Feb 20 Javascript
AngularJS的脏检查深入分析
Apr 22 Javascript
angular.js4使用 RxJS 处理多个 Http 请求
Sep 23 Javascript
Vue组件库发布到npm详解
Feb 17 Javascript
D3.js实现拓扑图的示例代码
Jun 30 Javascript
Vue数字输入框组件的使用方法
Oct 19 Javascript
vue中改变滚动条样式的方法
Mar 03 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
叶罗丽:为什么大家对颜冰这对CP非常关心,却对金茉两人十分冷漠
2020/03/17 国漫
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
jQuery 图像裁剪插件Jcrop的简单使用
2009/05/22 Javascript
Javascript 加载和执行-性能提高篇
2012/12/28 Javascript
jquery struts 验证唯一标识(公用方法)
2013/03/27 Javascript
JavaScript字符串插入、删除、替换函数使用示例
2013/07/25 Javascript
jQuery跨域问题解决方案
2015/08/03 Javascript
对Angular.js Controller如何进行单元测试
2016/10/25 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
2017/03/13 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
2017/04/12 Javascript
Vue中保存用户登录状态实例代码
2017/06/07 Javascript
微信小程序 获取javascript 里的数据
2017/08/17 Javascript
Vue与React的区别和优势对比
2020/12/18 Vue.js
[01:14:12]2018DOTA2亚洲邀请赛4.7 总决赛 LGD vs Mineski 第二场
2018/04/09 DOTA
Python实现的HTTP并发测试完整示例
2020/04/23 Python
Python中的模块导入和读取键盘输入的方法
2015/10/16 Python
Queue 实现生产者消费者模型(实例讲解)
2017/11/13 Python
python对list中的每个元素进行某种操作的方法
2018/06/29 Python
python爬虫模拟浏览器的两种方法实例分析
2019/12/09 Python
Pyqt5自适应布局实例
2019/12/13 Python
python实现计算图形面积
2021/02/22 Python
CSS3 Backgrounds属性相关介绍
2011/05/11 HTML / CSS
css3 仿写阿里云水纹效果的示例代码
2018/02/10 HTML / CSS
HTML 5 input placeholder 属性如何完美兼任ie
2014/05/12 HTML / CSS
HTML5 拖放(Drag 和 Drop)详解与实例代码
2017/09/14 HTML / CSS
html5视频媒体标签video的使用方法及完整参数说明详解
2019/09/27 HTML / CSS
html5实现输入框fixed定位在屏幕最底部兼容性
2020/07/03 HTML / CSS
澳大利亚领先的女性运动服品牌:Lorna Jane
2020/06/19 全球购物
.net软件工程师应聘上机试题
2015/03/10 面试题
软件缺陷的分类都有哪些
2014/08/22 面试题
电子商务助理求职自荐信
2014/04/10 职场文书
装修协议书范本
2014/04/21 职场文书
2014年大学生预备党员思想汇报1000字
2014/09/13 职场文书
国家税务局干部作风整顿整改措施
2014/09/18 职场文书
无刑事犯罪记录证明范本
2014/09/29 职场文书