AngularJS中如何使用$http對MongoLab資料表進行增刪改查_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資料表進行增刪改查的相關知識，希望對大家有所協助。