Dónde encontrar angular-xeditable y ajax juntos funcionan con un ejemplo simple
-
21-12-2019 - |
Pregunta
Ahora, estoy usando angular-xeditable. Quiero enviar datos de edición al servidor.
<div ng-controller="Ctrl">
<a href="#" id='username' editable-text="user.name">{{ user.name || "empty" }}</a>
</div>
y el código js es
<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>
Recibí el nombre de la variable y el valor está vacío.Este código no funciona. No encuentro el error.
Solución
Debe invocar su código que se publica en el servidor en el onaftersave
evento, que está documentado aquí: http://vitalets.github.io/angular-xeditable/#onaftersave
Este evento se llama después de que los cambios en el cuadro de entrada se hayan configurado en el modelo.
En su HTML coloque la llamada a la función en el onaftersave
atributo como este:
<div ng-controller="Ctrl">
<a href="#" id='username' onaftersave='postName()' editable-text="user.name">{{ user.name || "empty" }}</a>
</div>
En su controlador, cree la función postName que realmente publica los datos en el servidor.Su código se vería así:
<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>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow