[angular]数组清空后,视图没有马上更新

发布于 2022-09-01 12:07:56 字数 973 浏览 21 评论 0

最近在开发一个数据列表时遇到问题:
该数据列表有一个搜索功能,当输入时,会立即根据输入的关键词,从服务端请求搜索结果。然后视图马上渲染结果。具体代码如下:

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){
            //关键词发生变化时,清空列表
            $scope.files.length=0;
            //然后请求数据
            $scope.query();
        }
    });

    $scope.query();
});

现在的问题在于:当清空数组时,视图上的列表没有消失,待搜索结果返回后,并渲染成功,前一个列表才消失,也就是说,两组数据会同时存在几百毫秒的样子,前一组数据才消失,调用$scope.$apply()并没有什么用,会抛出错误:degist in progress,说明已经在更新视图中,但是不知道为什么会这么慢。
ps:还有其它数据列表,则没有这个问题

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

喜你已久 2022-09-08 12:07:56

试试调用scope.$digest();这个有没有用?

简单气质女生网名 2022-09-08 12:07:56

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);
            });
        });
};

});

模版中 关键词输入框 使用ng-change="query()" 就可以了。 不要滥用watch 除非你明白怎么用

家住魔仙堡 2022-09-08 12:07:56


`$timeout(function(){
$scope.files = [];
})`

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文