Dove trovare Angular-Xedicable e Ajax insieme lavorano un semplice esempio
-
21-12-2019 - |
Domanda
Ora, sto usando angolare-xedicable.i voglio inviare i dati di modifica al server.
<div ng-controller="Ctrl">
<a href="#" id='username' editable-text="user.name">{{ user.name || "empty" }}</a>
</div>
.
e il codice JS è
<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>
.
Ho ricevuto la variabile del nome è un valore vuoto. Questo codice non funziona. Impossibile trovare errore.
Soluzione
È necessario richiamare il codice che pubblica sul server sull'evento onaftersave
, che è documentato qui: http://vitalets.github.io/angular-xediable/#onaftaversew
Questo evento viene chiamato dopo che le modifiche nell'inputbox sono state impostate sul modello.
Nel tuo HTML inserisci la chiamata della funzione nell'attributo onaftersave
come questa:
<div ng-controller="Ctrl">
<a href="#" id='username' onaftersave='postName()' editable-text="user.name">{{ user.name || "empty" }}</a>
</div>
.
Nel tuo controller crea la funzione PostName che inserisce effettivamente i dati sul server.Il tuo codice sembrerebbe questo:
<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>
. Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow