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 相关文章推荐
不错的asp中显示新闻的功能
Oct 13 Javascript
JavaScript EasyPager 分页函数
May 25 Javascript
JavaScript设置表单上传时文件个数的方法
Aug 11 Javascript
分享几种比较简单实用的JavaScript tabel切换
Dec 31 Javascript
jQuery旋转插件jqueryrotate用法详解
Oct 13 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
Dec 11 Javascript
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
three.js中3D视野的缩放实现代码
Nov 16 Javascript
安装Node.js并启动本地服务的操作教程
May 12 Javascript
JS数组方法concat()用法实例分析
Jan 18 Javascript
vue点击标签切换选中及互相排斥操作
Jul 17 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
Jul 28 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
CI框架中zip类应用示例
2014/06/17 PHP
PHP模板引擎smarty详细介绍
2015/05/26 PHP
PHP-FPM的配置与优化讲解
2019/03/15 PHP
JS验证日期的格式YYYY-mm-dd 具体实现
2013/06/29 Javascript
js判断60秒以及倒计时示例代码
2014/01/24 Javascript
JavaScript 获取任一float型小数点后两位的小数
2014/06/30 Javascript
使用phantomjs进行网页抓取的实现代码
2014/09/29 Javascript
Sortable.js拖拽排序使用方法解析
2016/11/04 Javascript
关于json字符串与实体之间的严格验证代码
2016/11/10 Javascript
微信小程序 动态绑定数据及动态事件处理
2017/03/14 Javascript
本地搭建微信小程序服务器的实现方法
2017/10/27 Javascript
在 React、Vue项目中使用SVG的方法
2018/02/09 Javascript
一步一步实现Vue的响应式(对象观测)
2019/09/02 Javascript
[01:36]极致酷炫!TI9典藏宝瓶+撼地者至宝展示
2019/06/11 DOTA
使用setup.py安装python包和卸载python包的方法
2013/11/27 Python
Flask入门教程实例:搭建一个静态博客
2015/03/27 Python
读取json格式为DataFrame(可转为.csv)的实例讲解
2018/06/05 Python
如何用python写一个简单的词法分析器
2018/12/18 Python
Django如何实现上传图片功能
2019/08/16 Python
Python中zip()函数的简单用法举例
2019/09/02 Python
基于python3监控服务器状态进行邮件报警
2019/10/19 Python
Python3 io文本及原始流I/O工具用法详解
2020/03/23 Python
快速了解Python开发环境Spyder
2020/06/29 Python
python中round函数保留两位小数的方法
2020/12/04 Python
selenium3.0+python之环境搭建的方法步骤
2021/02/01 Python
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
2017/07/11 HTML / CSS
台湾网购生鲜第一品牌:i3Fresh爱上新鲜
2017/10/26 全球购物
数据库什么时候应该被重组
2012/11/02 面试题
Python面试题集
2012/03/08 面试题
优秀党支部事迹材料
2014/01/14 职场文书
创先争优制度
2014/01/21 职场文书
厨房领班竞聘演讲稿
2014/04/23 职场文书
政府信息公开实施方案
2014/05/09 职场文书
试用期转正后的自我评价
2014/09/21 职场文书
MySQL query_cache_type 参数与使用详解
2021/07/01 MySQL
人物搭配车车超萌联名预备中 【咒术迴战】 ⨯ 【天竺鼠车车】 展开合作
2022/04/11 日漫