Maison > interface Web > js tutoriel > Comment utiliser $http pour ajouter, supprimer, modifier et interroger les tables de données MongoLab dans AngularJS_AngularJS

Comment utiliser $http pour ajouter, supprimer, modifier et interroger les tables de données MongoLab dans AngularJS_AngularJS

WBOY
Libérer: 2016-05-16 15:18:27
original
1775 Les gens l'ont consulté

Page principale :

<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>
Copier après la connexion

Ci-dessus, l'affichage du contenu de course_list.html, add_course.html et edit_course.html affiché sur la page est lié aux valeurs toggleAddCourseView et toggleEditCourseView, et les valeurs toggleAddCourseView et toggleEditCourseView seront contrôlées par des méthodes.

Créer une base de données et des tables sur Mongolab

→ https://mongolab.com
→ S'inscrire
→ Connectez-vous
→ Créer un nouveau
→ Sélectionnez Nœud unique

Vérifiez le bac à sable et entrez le nom de la base de données comme myacademy.

→ Cliquez sur la base de données nouvellement créée
→ Cliquez sur Ajouter une collection

Le nom est bien sûr

→ Cliquez sur la collection de cours.
→ Cliquez plusieurs fois sur Ajouter un document pour ajouter plusieurs éléments de données

Contrôleur

$scope.courses = [];
var url = "https://api.mongolab.com/api/1/databases/my-academy/collections/course&#63;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;
}
Copier après la connexion

course_list.html liste

<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>
Copier après la connexion

add_course.html Ajouter

<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>
Copier après la connexion

mise à jour 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>
Copier après la connexion

Ce qui précède représente les connaissances partagées par l'éditeur sur la façon d'utiliser $http pour ajouter, supprimer, modifier et interroger la table de données MongoLab dans AngularJS. J'espère que cela sera utile à tout le monde.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal