navigateur écrasé lorsque AngularJS fournissent des données sur HTML datalist

Question

J'ai un html datalist qui fournit la liste des nom de compte dont environ 14k +, il fonctionne très bien, mais tout navigateur je volonté not respond d'abord, puis fourni avec succès les données datalist utilisant ng-repeat. Dans le pire des cas, le navigateur a planté.

C# backend

public JsonResult getCollateralAccount() { 
     List<collateralAccount> accountlist = new List<collateralAccount>(); 
     sqlHelper = new QueryHelper(); 
     SqlParameter[] parameterList = { }; 
     var table = sqlHelper.ExecuteQuery("collateralGetListOfAccount", System.Data.CommandType.StoredProcedure, parameterList).Tables[0]; 
     accountlist = table.AsEnumerable().Select(row => new collateralAccount 
       { 
        Id = row.Field<int>("Id"), 
        name = row.Field<string>("name") 
       }).ToList(); 

     return new JsonResult { Data = accountlist, JsonRequestBehavior = JsonRequestBehavior.AllowGet }; 
} 

service

getCollateralAccount: function (data) { 
    var $getCollateralAccount = $http.get('/Collatera/getCollateralAccount'). 
    success(function (data) { 
     return data; 
    }); 
    return $getCollateralAccount; 
} 

Contrôleur

$scope.listofCAccount = []; 
CollateralService.getCollateralAccount().then(function(msg){ 
    if(msg.data.length>0){ 
     $scope.listofCAccount = msg.data; 
    } 
}); 

Voir

<input id="username" type="text" class="form-control width100" list="UsersName" ng-model="user.name" required/> 
<datalist id="UsersName"> 
     <option ng-repeat="acc in accListContainer track by $index" value="{{acc.name}}" data-val="{{acc.name}}"></option> 
</datalist> 

Quelqu'un peut me aider comment arrêter mon navigateur de tomber en panne ou ne répond pas?

Answer 1

success/error est obsolète, vous utilisez également then à votre contrôleur, il suffit donc de modifier votre service comme ci-dessous (renvoyer la promesse de $ http.get directement).

getCollateralAccount: function (data) { 
    return $http.get('/Collatera/getCollateralAccount'); 
} 

Answer 2

14K résultat dans un ng-repeat est certainement pas ce que tout utilisateur aimerait voir. Vous pouvez essayer le filtre limitTo si cela vous concerne. Vous pouvez l'utiliser comme ceci:

ng-repeat="acc in accListContainer | limitTo:10 track by $index" 

Pour des approches plus intéressantes voir: How to improve performance of ngRepeat over a huge dataset (angular.js)?