angular.js - [angular] Selepas tatasusunan dikosongkan, paparan tidak dikemas kini serta-merta
PHP中文网
PHP中文网 2017-05-15 16:52:44
0
3
650

Baru-baru ini saya menghadapi masalah semasa membangunkan senarai data:
Senarai data mempunyai fungsi carian Apabila dimasukkan, hasil carian akan segera diminta daripada pelayan berdasarkan kata kunci yang dimasukkan. Pandangan kemudian memaparkan hasilnya serta-merta. Kod khusus adalah seperti berikut:

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

Masalah semasa ialah: apabila tatasusunan dikosongkan, senarai pada paparan tidak hilang Selepas hasil carian dikembalikan dan pemaparan berjaya, senarai sebelumnya akan hilang adakah kedua-dua set data itu wujud pada masa yang sama? Ia mengambil masa beratus-ratus milisaat untuk set data sebelumnya hilang.$apply() tidak ada gunanya bahawa pandangan itu sudah dikemas kini, tetapi saya tidak tahu mengapa ia begitu perlahan.
ps: Terdapat senarai data lain, yang tidak mempunyai masalah ini

PHP中文网
PHP中文网

认证高级PHP讲师

membalas semua(3)
滿天的星座

Cuba hubungi scope.$digest(); Adakah ini berfungsi?

Peter_Zhu

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

});

Hanya gunakan ng-change="query()" dalam kotak input kata kunci dalam templat. Jangan menyalahgunakan jam tangan melainkan anda tahu cara menggunakannya

洪涛


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

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan