在哪里找到角xeditable和ajax在一起工作简单的例子
-
21-12-2019 - |
题
现在,我正在使用Angular-XEDitaita.i希望将编辑数据发送到服务器。
<div ng-controller="Ctrl">
<a href="#" id='username' editable-text="user.name">{{ user.name || "empty" }}</a>
</div>
.
和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>
.
我收到的名称变量是空值。 此代码不起作用。我找不到错误。
解决方案
您需要调用在此处记录的onaftersave
事件上发布到服务器的代码: http://vitalets.github.io/angular-xedable/#naftersave
此事件在模型上设置了输入框的更改后调用。
在您的HTML中将函数调用放在类似的onaftersave
属性中:
<div ng-controller="Ctrl">
<a href="#" id='username' onaftersave='postName()' editable-text="user.name">{{ user.name || "empty" }}</a>
</div>
.
在控制器中创建实际将数据发布到服务器的后名称功能。您的代码如下所示:
<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>
. 不隶属于 StackOverflow