欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

AngularJS中如何使用$http对MongoLab数据表进行增删改查

程序员文章站 2022-05-30 21:26:05
主页面:

主页面:

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