AngularJS中如何使用$http对MongoLab数据表进行增删改查
程序员文章站
2023-09-06 09:58:27
主页面:
主页面:
<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中$compile源码分析
下一篇: 儿童能吃燕窝吗?答案当然是可以