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中each()的使用方法说明
Aug 19 Javascript
Js注册协议倒计时的小例子
Jun 24 Javascript
javascript禁用Tab键脚本实例
Nov 22 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
Dec 19 Javascript
JavaScript中的prototype原型学习指南
May 09 Javascript
javascript鼠标滑过显示二级菜单特效
Nov 18 Javascript
jQuery简单倒计时效果完整示例
Sep 20 Javascript
100多个基础常用JS函数和语法集合大全
Feb 16 Javascript
浅谈angular2子组件的事件传递(任意组件事件传递)
Sep 30 Javascript
微信小程序如何获取用户收货地址
Nov 27 Javascript
说说Vue.js中的functional函数化组件的使用
Feb 12 Javascript
微信小程序后端实现授权登录
Feb 24 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
探讨Smarty中如何获取数组的长度以及smarty调用php函数的详解
2013/06/20 PHP
PHP实现网站应用微信登录功能详解
2019/04/11 PHP
Javascript 事件流和事件绑定
2009/07/16 Javascript
JS实现标签页效果(配合css)
2013/04/03 Javascript
jQuery设置div一直在页面顶部显示的方法
2013/10/24 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
2014/01/23 Javascript
JS中getYear()和getFullYear()区别分析
2014/07/04 Javascript
微信小程序 网络API Websocket详解
2016/11/09 Javascript
jQuery实现弹幕效果
2017/02/17 Javascript
关于JavaScript的单双引号嵌套问题
2017/08/20 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
2018/09/01 Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
2018/10/09 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
2020/12/07 Javascript
python抓取百度首页的方法
2015/05/19 Python
python如何在列表、字典中筛选数据
2018/03/19 Python
python字典值排序并取出前n个key值的方法
2018/10/17 Python
Python之pymysql的使用小结
2019/07/01 Python
python elasticsearch从创建索引到写入数据的全过程
2019/08/04 Python
Python编写打字训练小程序
2019/09/26 Python
python中with语句结合上下文管理器操作详解
2019/12/19 Python
Python Django form 组件动态从数据库取choices数据实例
2020/05/19 Python
Django的ListView超详细用法(含分页paginate)
2020/05/21 Python
Python中Qslider控件实操详解
2021/02/20 Python
基于tensorflow __init__、build 和call的使用小结
2021/02/26 Python
CSS3 transform的skew属性值图文详解
2014/07/21 HTML / CSS
南京迈特望C/C++面试题
2012/07/09 面试题
通信工程毕业生自荐信
2013/11/01 职场文书
《唯一的听众》教学反思
2014/02/20 职场文书
向国旗敬礼活动总结
2014/09/27 职场文书
导游词范文
2015/02/13 职场文书
2015年新教师工作总结
2015/04/28 职场文书
建国大业观后感800字
2015/06/01 职场文书
创业计划书之网络外卖
2019/10/31 职场文书
pytorch显存一直变大的解决方案
2021/04/08 Python
redis 解决库存并发问题实现数量控制
2022/04/08 Redis
Redis特殊数据类型HyperLogLog基数统计算法讲解
2022/06/01 Redis