Javascript 当angularjs在HTML数据列表上提供数据时，浏览器崩溃

我有一个

html数据列表

，它提供了大约14k+的帐户名列表，工作正常，但我使用的任何浏览器都将

不响应

，然后使用

ng repeat

在

数据列表

中成功提供数据。最坏的情况是浏览器崩溃

C#后端

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

控制器

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

查看

<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>

---

有谁能帮我阻止我的浏览器崩溃或不响应吗？

成功/错误

已被弃用，而且您正在控制器上使用

然后

，所以只需按以下方式更改您的服务（返回$http.get directly的承诺）

---

14K导致ng重复肯定不是任何用户希望看到的结果。
如果这适用于您，您可以尝试

limito

filter。您可以这样使用它：

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

---

有关更有趣的方法，请参见：

我已经在@Pengyy上做了，但浏览器始终没有响应，但这次恢复速度比上次快time@pryxen有太多的数据，也许你应该考虑使用分页或虚拟卷轴。我不能使用这些，因为我的客户希望在输入字段和数据列表时自动完成，这是一个很好的解决方案，但它一直没有响应，但只花了30秒就再次响应：（angularjs使用ng repeat将数据绑定到数据列表时，浏览器崩溃；（@pryxen这不是关于

ng repeat

的问题，如果数据太多，所有事情都会一样。对于自动完成，我认为可能

前10名或前20名就足够了。
getCollateralAccount: function (data) {
  return $http.get('/Collatera/getCollateralAccount');
}

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