主頁:
<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資料表進行增刪改查的相關知識,希望對大家有所幫助。