Where to find angular-xeditable and ajax together work simple example - ajax

Question

Now, I am using angular-xeditable.I want to send edit data to server.
<div ng-controller="Ctrl">
{{ user.name || "empty" }}
</div>
and js code is
<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>
I received name variable is empty value.
This code doesn't work.I can't find error.

Answer 1

You need to invoke your code that posts to the server on the onaftersave event, which is documented here: http://vitalets.github.io/angular-xeditable/#onaftersave
This event is called after the changes in the inputbox have been set on the model.
In your HTML put the function call in the onaftersave attribute like this:
<div ng-controller="Ctrl">
{{ user.name || "empty" }}
</div>
In your controller create the postName function which actually posts the data to the server. Your code would look like this:
<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>