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 相关文章推荐
DOM Scripting中的图片切换[兼容Firefox]
Jun 12 Javascript
写自已的js类库需要的核心代码
Jul 16 Javascript
使用简洁的jQuery方法实现隔行换色功能
Jan 02 Javascript
js Calender控件使用详解
Jan 05 Javascript
js仿黑客帝国字母掉落效果代码分享
Nov 08 Javascript
jQuery Mobile动态刷新页面样式的实现方法
May 28 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
Oct 24 Javascript
react.js 获取真实的DOM节点实例(必看)
Apr 17 Javascript
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
详解关于element级联选择器数据回显问题
Feb 20 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 jQuery
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
Aug 17 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 flv视频时间获取函数
2010/06/29 PHP
Ping服务的php实现方法,让网站快速被收录
2012/02/04 PHP
PHP针对中英文混合字符串长度判断及截取方法示例
2017/03/31 PHP
php layui实现前端多图上传实例
2019/07/30 PHP
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
2008/12/02 Javascript
调试Node.JS的辅助工具(NodeWatcher)
2012/01/04 Javascript
web开发人员学习jQuery的6大理由及jQuery的优势介绍
2013/01/03 Javascript
浅析js中的浮点型运算问题
2014/01/06 Javascript
js实现两点之间画线的方法
2015/05/12 Javascript
《JavaScript函数式编程》读后感
2015/08/07 Javascript
基于JavaScript实现移动端TAB触屏切换效果
2015/10/20 Javascript
JavaScript Ajax编程 应用篇
2016/07/02 Javascript
easyui tree带checkbox实现单选的简单实例
2016/11/07 Javascript
Jquery通过ajax请求NodeJS返回json数据实例
2016/11/08 NodeJs
javaScript+turn.js实现图书翻页效果实例代码
2017/02/16 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
2017/03/09 Javascript
javascript input输入框模糊提示功能的实现
2017/09/25 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
2018/01/02 jQuery
JavaScript中如何对多维数组(矩阵)去重的实现
2019/12/04 Javascript
vue中的v-model原理,与组件自定义v-model详解
2020/08/04 Javascript
vue打开新窗口并实现传参的图文实例
2021/03/04 Vue.js
python进程管理工具supervisor的安装与使用教程
2017/09/05 Python
Python 错误和异常代码详解
2018/01/29 Python
python自动生成model文件过程详解
2019/11/02 Python
基于python实现文件加密功能
2020/01/06 Python
YOOX美国官方网站:全球著名的多品牌时尚网络概念店
2016/09/11 全球购物
Otticanet意大利:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
物流管理专业毕业生求职信
2014/03/23 职场文书
竞聘上岗演讲
2014/05/19 职场文书
写给导师的自荐信
2015/03/06 职场文书
2016年6.5世界环境日宣传活动总结
2016/04/01 职场文书
如何撰写促销方案?
2019/07/05 职场文书
python 下划线的多种应用场景总结
2021/05/12 Python
浅谈Python数学建模之整数规划
2021/06/23 Python
Python中递归以及递归遍历目录详解
2021/10/24 Python
MySQL 原理与优化之Limit 查询优化
2022/08/14 MySQL