Où trouver angulaire-xeditable et ajax ensemble, exemple simple
-
21-12-2019 - |
Question
Maintenant, j'utilise angulaire-xeditable. Je souhaite envoyer des données de modification au serveur.
<div ng-controller="Ctrl">
<a href="#" id='username' editable-text="user.name">{{ user.name || "empty" }}</a>
</div>
et le code js est
<script type="text/javascript">
var app = angular.module("app", ["xeditable"]);
app.controller('Ctrl', function($scope,$http) {
$scope.user = {
name: 'awesome user'
};
$http.post("<?php echo base_url(); ?>index.php/welcome/test", {"name":name})
.success(function(data, status, headers, config) {
$scope.data = data;
})
.error(function(data, status, headers, config) {
$scope.status = status;
});
});
</script>
J'ai reçu une variable de nom dont la valeur est vide.Ce code ne fonctionne pas. Je ne trouve pas d'erreur.
La solution
Vous devez appeler votre code qui publie sur le serveur sur le onaftersave
événement, qui est documenté ici : http://vitalets.github.io/angular-xeditable/#onaftersave
Cet événement est appelé une fois que les modifications apportées à la zone de saisie ont été définies sur le modèle.
Dans votre code HTML, placez l'appel de fonction dans le onaftersave
attribut comme ceci :
<div ng-controller="Ctrl">
<a href="#" id='username' onaftersave='postName()' editable-text="user.name">{{ user.name || "empty" }}</a>
</div>
Dans votre contrôleur, créez la fonction postName qui publie réellement les données sur le serveur.Votre code ressemblerait à ceci :
<script type="text/javascript">
var app = angular.module("app", ["xeditable"]);
app.controller('Ctrl', function ($scope, $http) {
$scope.user = {
name: 'awesome user'
};
// Called on the onaftersave event of xeditable
$scope.postName = function () {
$http.post("<?php echo base_url(); ?>index.php/welcome/test", {"name": $scope.user.name})
.success(function (data, status, headers, config) {
$scope.data = data;
})
.error(function (data, status, headers, config) {
$scope.status = status;
});
}
});
</script>