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

前端技术 2023/09/02 JavaScript

主页面：

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

本文地址：https://www.stayed.cn/item/3696

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案