AngularJS中如何使用$http对MongoLab数据表进行增删改查
主页面:
<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数据表进行增删改查的相关知识,希望对大家有所帮助。
相关文章
Angular Ngrx Store应用程序状态典型示例详解
这篇文章主要为大家介绍了Angular Ngrx Store应用程序状态典型示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-07-07
Angular中ng-options下拉数据默认值的设定方法
本篇文章主要介绍了Angular中ng-options下拉数据默认值的设定方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2017-06-06
Facade Service暴露commands简化代码逻辑提高可访问性组合性
在 Angular 应用开发中,使用 Facade Service 暴露 commands(命令)以及订阅这些 commands 是一个常见的设计模式,本文将详细介绍在 Facade Service 中如何实现这一目标,并深入探讨相关细节,以及通过实际示例进行说明2023-10-10
理解AngularJs篇:30分钟快速掌握AngularJs
这篇文章主要介绍了理解AngularJs篇:30分钟快速掌握AngularJs,详细介绍了AngularJs所涉及的知识点,有兴趣的可以了解一下。2016-12-12


最新评论