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

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.