AngularJS中如何使用$http对MongoLab数据表进行增删改查
主页面：
<buttonng-click="loadCourse()">LoadCourse</button> <buttonng-click="toggleAddCourse(true)">AddNewCourse</button> <ng-includcesrc="'course_list.html'"></ng-include> <ng-includesrc="'add_course.html'"ng-show="toggleAddCourseView"></ng-include> <ng-includesrc="'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
→注册
→登录
→Createnew
→选择Single-node
勾选Sandbox,输入Databasename的名称为myacademy。
→点击新创建的Database
→点击Addcollection
名称为course
→点击course这个collection。
→多次点击adddocument，添加多条数据
控制器
$scope.courses=[];
varurl="https://api.mongolab.com/api/1/databases/my-academy/collections/course?apiKey=myAPIKey";
varconfig={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){
varid=courseToEdit._id.$oid;
$http.put(url+"/"+id,courseToEdit,config)
.success(fucntion(data){
$scope.loadCourses();
})
}
//删除
$scope.delteCourse=function(course){
varid=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列表
<trng-repeat="courseincourses">
<td>{{$index+1}}</td>
<td>{{course.name}}</td>
<td>{{course.category}}</td>
<td>{{course.timeline}}</td>
<td>{{course.price|currency}}</td>
<td><buttonng-click="editCourse(course)">Edit</button></td>
<td><buttonng-click="deleteCourse(course)">Delete</button></td>
</tr>
add_course.html添加
<form> <inputtype="text"ng-model="course.name"/> <selectng-model="course.category"> <option>-Select-</option> <optionvalue="development">Development</option> <optionvalue="business">Business</option> </select> <inputtype="number"ng-model="course.timeline"/> <inputtype="number"ng-model="course.price"/> <buttonng-click="addCourse(course)">Add</button> <buttonng-click="toggleAddCourse(false)">Cancel</button> </form>
edit_course.html更新
<form> <inputtype="text"ng-model="courseToEdit.name"/> <selectng-model="courseToEdit.category"> <option>-select-</option> <optionvalue="development">Development</option> <optionvalue="business">Business</option> </select> <inputtype="number"ng-model="courseToEdit.timeline"/> <inputtype="number"ng-model="courseToEdit.price"/> <buttonng-click="updateCourse(courseToEdit)">Update</button> <buttonng-click="toggleEditCourse(false)">Cancel</button> </form>
以上所述是小编给大家分享的AngularJS中如何使用$http对MongoLab数据表进行增删改查的相关知识，希望对大家有所帮助。