Halaman utama:
<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>
Di atas, paparan kandungan course_list.html, add_course.html dan edit_course.html yang dipaparkan pada halaman adalah berkaitan dengan nilai toggleAddCourseView dan toggleEditCourseView dan nilai toggleAddCourseView dan toggleEditCourseView akan dikawal oleh kaedah.
Buat pangkalan data dan jadual di Mongolab
→ https://mongolab.com
→ Daftar
→ Log masuk
→ Cipta baharu
→ Pilih Single-nod
Semak Kotak Pasir dan masukkan nama Pangkalan Data sebagai myacademy.
→ Klik pada Pangkalan Data yang baru dibuat
→ Klik Tambah koleksi
Nama ialah kursus
→ Klik pada koleksi kursus.
→ Klik tambah dokumen beberapa kali untuk menambah beberapa keping data
Pengawal
$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; }
senarai_kursus.html senarai
<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 Tambah
<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>
kemas kini 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>
Di atas adalah pengetahuan yang dikongsi oleh editor tentang cara menggunakan $http untuk menambah, memadam, mengubah suai dan menanyakan jadual data MongoLab dalam AngularJS saya harap ia akan membantu semua orang.