最近在学习AngularJS,感觉AngularJS绑定数据确实方便,于是尽快用到项目中,我绑定的是一个下拉框:通过ajax获取数组,将ajax返回的数据绑定到下拉框上,自动生成下拉列表,但是中间遇到了绑定失败的问题,如下是我的解决思路(不再贴运行效果图,只提供解决问题的思路,以作参考)
错误绑定代码如下:
$(function () {
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.names = JSON.parse(GetArray());
$scope.seconds = JSON.parse(GetArray());
})
})
function GetArray() {
var obj = {
NameSpace_name: sessionStorage["NameSpace"]
};
$.ajax({
type: 'post',
url: "../../Model/Test",
contentType: 'application/json',
data: JSON.stringify(obj),
async: false,
success: function (data) {
return data;
},
error: function (jqXHR, textStatus, errorThrown) {
/*jqXHR对象的信息*/
console.log('jqXHR.responseText --> ', jqXHR.responseText);
console.log('jqXHR.status --> ', jqXHR.status);
console.log('jqXHR.readyState --> ', jqXHR.readyState);
console.log('jqXHR.statusText --> ', jqXHR.statusText);
/*其他两个参数的信息*/
console.log('textStatus --> ', textStatus);
console.log('errorThrown --> ', errorThrown);
}
});
}
这样的绑定会出问题的,一是ajax是异步的,当AngularJS中元素绑定数值时,此时ajax返回值还为null,将ajax设置成同步也不行(具体原因正在找),此时我们可以将ajax放到AngularJS中controller的function中执行:
<script type="text/javascript">
var models;
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
var obj = {
NameSpace_name: sessionStorage["NameSpace"]
};
$.ajax({
type: 'post',
url: "../../Model/Test",
contentType: 'application/json',
data: JSON.stringify(obj),
async: false,
success: function (data) {
$scope.names = JSON.parse(data);
$scope.seconds = JSON.parse(data);
},
error: function (jqXHR, textStatus, errorThrown) {
/*jqXHR对象的信息*/
console.log('jqXHR.responseText --> ', jqXHR.responseText);
console.log('jqXHR.status --> ', jqXHR.status);
console.log('jqXHR.readyState --> ', jqXHR.readyState);
console.log('jqXHR.statusText --> ', jqXHR.statusText);
/*其他两个参数的信息*/
console.log('textStatus --> ', textStatus);
console.log('errorThrown --> ', errorThrown);
}
});
});
</script>
绑定成功。
最后提醒,绑定的数据类型如果是数组,需转化为JSON对象。
当然通过AngularJS绑定数据时,还可以使用AngularJS自带的$http方法,这里就不做讨论了。
写本文一是分享心得,二是怕自己以后忘记,如果不能为您提供帮助,请另寻贵资!