欢迎来到代码驿站!

AngularJS

当前位置:首页 > 网页前端 > AngularJS

AngularJS中如何使用$http对MongoLab数据表进行增删改查

时间:2021-02-28 14:52:34|栏目:AngularJS|点击:

主页面:

<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数据表进行增删改查的相关知识,希望对大家有所帮助。

上一篇:angular6.0开发教程之如何安装angular6.0框架

栏    目:AngularJS

下一篇:angular异步验证防抖踩坑实录

本文标题:AngularJS中如何使用$http对MongoLab数据表进行增删改查

本文地址:http://www.codeinn.net/misctech/71759.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有