最近在開發(fā)一個(gè)數(shù)據(jù)列表時(shí)遇到問題:
該數(shù)據(jù)列表有一個(gè)搜索功能,當(dāng)輸入時(shí),會(huì)立即根據(jù)輸入的關(guān)鍵詞,從服務(wù)端請(qǐng)求搜索結(jié)果。然后視圖馬上渲染結(jié)果。具體代碼如下:
app.controller('ListViewController',function($scope){
$scope.files=[];
$scope.vm={
key:''
};
$scope.query=function(){
var param={
nameFuzzy:$scope.vm.key
}
$http.post(url,param)
.success(function(resp){
angular.each(resp,function(item){
$scope.files.push(item);
});
});
};
$scope.$watch('vm.key',function(newVal,oldVal){
if(newVal!==oldVal){
//關(guān)鍵詞發(fā)生變化時(shí),清空列表
$scope.files.length=0;
//然后請(qǐng)求數(shù)據(jù)
$scope.query();
}
});
$scope.query();
});
現(xiàn)在的問題在于:當(dāng)清空數(shù)組時(shí),視圖上的列表沒有消失,待搜索結(jié)果返回后,并渲染成功,前一個(gè)列表才消失,也就是說,兩組數(shù)據(jù)會(huì)同時(shí)存在幾百毫秒的樣子,前一組數(shù)據(jù)才消失,調(diào)用$scope.$apply()并沒有什么用,會(huì)拋出錯(cuò)誤:degist in progress,說明已經(jīng)在更新視圖中,但是不知道為什么會(huì)這么慢。
ps:還有其它數(shù)據(jù)列表,則沒有這個(gè)問題
認(rèn)證高級(jí)PHP講師
app.controller('ListViewController',function($scope){
$scope.files=[];
$scope.vm={
key:''
};
$scope.query=function(){
var param={
nameFuzzy:$scope.vm.key
}
$scope.files=[]; //增加
$http.post(url,param)
.success(function(resp){
angular.each(resp,function(item){
$scope.files.push(item);
});
});
};
});
模版中 關(guān)鍵詞輸入框 使用ng-change="query()" 就可以了。 不要濫用watch 除非你明白怎么用
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://www.miracleart.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)