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 相关文章推荐
jQuery 阴影插件代码分享
Jan 09 Javascript
js对象关系图 方便dom操作
Mar 18 Javascript
dwz 如何去掉ajaxloading具体代码
May 22 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
Oct 12 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
Jun 06 Javascript
bootstrap组件之导航组件使用方法
Jan 19 Javascript
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
浅谈react+es6+webpack的基础配置
Aug 09 Javascript
在vue项目中正确使用iconfont的方法
Sep 28 Javascript
layer ui 导入文件之前传入数据的实例
Sep 23 Javascript
微信小程序 button样式设置为图片的方法
Jun 19 Javascript
详解Node.JS模块 process
Aug 31 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
PHPShop存在多个安全漏洞
2006/10/09 PHP
PHP5权威编程阅读学习笔记 附电子书下载
2012/07/05 PHP
thinkphp普通查询与表达式查询实例分析
2014/11/24 PHP
PHP防盗链的基本思想 防盗链的设置方法
2015/09/25 PHP
PHP+AJAX实现投票功能的方法
2015/09/28 PHP
Yii2使用自带的UploadedFile实现的文件上传
2016/06/20 PHP
Apache无法自动跳转却显示目录的解决方法
2020/11/30 PHP
TNC vs BOOM BO3 第二场2.13
2021/03/10 DOTA
javascript 从if else 到 switch case 再到抽象
2010/07/17 Javascript
javascript中scrollTop详解
2015/04/13 Javascript
javascript鼠标右键菜单自定义效果
2020/12/08 Javascript
JS判断是否长按某一键的方法
2016/03/02 Javascript
JS实现的邮箱提示补全效果示例
2018/01/30 Javascript
node.js之基础加密算法模块crypto详解
2018/09/11 Javascript
在项目vue中使用echarts的操作步骤
2020/09/07 Javascript
python的类变量和成员变量用法实例教程
2014/08/25 Python
python通过opencv实现批量剪切图片
2017/11/13 Python
Python制作豆瓣图片的爬虫
2017/12/28 Python
python 实现在txt指定行追加文本的方法
2018/04/29 Python
Python爬虫图片懒加载技术 selenium和PhantomJS解析
2019/09/18 Python
浅析Python3 pip换源问题
2020/01/06 Python
opencv 图像滤波(均值,方框,高斯,中值)
2020/07/08 Python
Python模块zipfile原理及使用方法详解
2020/08/04 Python
python如何爬取动态网站
2020/09/09 Python
几款Python编译器比较与推荐(小结)
2020/10/15 Python
Madewell澳大利亚官方网站:美国休闲服饰品牌
2019/07/18 全球购物
香港莎莎官网Sasa.com:亚洲著名国际化妆品商城
2019/11/10 全球购物
捷克家具销售网站:SCONTO Nábytek
2020/01/02 全球购物
Monki官网:斯堪的纳维亚的独立时尚品牌
2020/11/09 全球购物
函授自我鉴定
2013/11/06 职场文书
办公室保洁员岗位职责
2013/12/02 职场文书
奥巴马获胜演讲稿
2014/05/15 职场文书
六一儿童节主持开场白
2015/05/28 职场文书
Python数据清洗工具之Numpy的基本操作
2021/04/22 Python
SpringBoot快速入门详解
2021/07/21 Java/Android
使用 Koa + TS + ESLlint 搭建node服务器的过程详解
2022/05/30 NodeJs