Onde encontrar angular-xeditable e ajax trabalham em conjunto simples exemplo
-
21-12-2019 - |
Pergunta
Agora, eu estou usando angular-xeditable.Eu quero mandar editar dados para o servidor.
<div ng-controller="Ctrl">
<a href="#" id='username' editable-text="user.name">{{ user.name || "empty" }}</a>
</div>
e o código 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>
Eu recebi o nome da variável é o valor vazio.Este código não funciona.Não consigo encontrar o erro.
Solução
Você precisa invocar o código que envia para o servidor o onaftersave
o evento, que está documentado aqui: http://vitalets.github.io/angular-xeditable/#onaftersave
Este evento é chamado após as alterações no inputbox foram definidas no modelo.
Em seu HTML colocar a chamada de função no onaftersave
o atributo como este:
<div ng-controller="Ctrl">
<a href="#" id='username' onaftersave='postName()' editable-text="user.name">{{ user.name || "empty" }}</a>
</div>
Em seu controller, crie o postName função que, na verdade, envia os dados para o servidor.O código teria esta aparência:
<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 em: CC-BY-SA com atribuição
Não afiliado a StackOverflow