主页面：

<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数据表进行增删改查的相关知识，希望对大家有所帮助。