时间:2021-05-28
主页面:
<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数据表进行增删改查的相关知识,希望对大家有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
stark组件是仿照django的admin模块开发的一套组件,它的作用是在网页上对注册的数据表进行增删改查操作一、配置1、创建stark应用,在setting
需求场景:使用sqlalchmy从现有的表中获取数据(不是自己建表)。百度了一下,网上都是使用sqlalchemy自己先创建表,然后导入数据表的模型类进行增删改
用AngularJS实现对表格的增删改查(仅限前端),具体代码:实现表格的增删改查.add{position:relative;top:-40px;left:1
ORM对象关系映射在数据库中,实现对数据的增删改查,使用的是SQ语句,在django中,通过python代码,实现对数据库的增删改查,这就是ORM。在pytho
本文实例讲述了thinkPHP数据库增删改查操作方法。分享给大家供大家参考,具体如下:thinkphp对数据库增删改查进行了封装操作,使得使用更加方便,但是不一