In AngularJS, how does one use $ http to add, delete, modify, and query the data table of eaglab? angularjsmongolab

Source: Internet
Author: User
Tags mongolab

In AngularJS, how does one use $ http to add, delete, modify, and query the data table of eaglab? angularjsmongolab

Home page:

<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>

The display of the response content is related to the toggleAddCourseView and toggleEditCourseView values, while the toggleAddCourseView and toggleEditCourseView values are controlled by methods.

Create databases and tables on Alibaba lab

→ Https://mongolab.com
→ Registration
→ Logon
→ Create new
→ Select Single-node

Select Sandbox and enter the Database name myacademy.

→ Click the newly created Database
→ Click Add collection

Name: course

→ Click the collection in course.
→ Click add document multiple times to add multiple data entries

Controller

$ 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; // list $ scope. loadCourses = function () {$ http. get (url, config ). success (function (data) {$ scope. courses = data ;}) ;}// add $ scope. addCourse = function (course) {$ http. post (url, course, config ). success (function (data) {$ scope. loadCourses () ;})} // display change $ scope. editCourse = function (course) {$ scope. toggleEditCourseView = true; $ scope. courseToEdit = angular. copy (course);} // modify $ scope. updateCourse = function (courseToEdit) {var id = courseToEdit. _ id. $ oid; $ http. put (url + "/" + id, courseToEdit, config ). success (fucntion (data) {$ scope. loadCourses () ;})} // Delete $ 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 list

<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 add

<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 update

<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>

The above is a small part of the AngularJS article about how to use $ http to add, delete, modify, and query the data table of Alibaba lab. I hope this article will help you.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.