Question

我一直在使用angularJS和JSON。这就是我将数据放入视图的方式。

@{
    var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
    serializer.MaxJsonLength = Int32.MaxValue;
    var jsonModel = serializer.Serialize(Model.PartsCollection);
}
<script>
 var app = angular.module('myApp', []);
    app.controller('partsController', function ($scope) {
        $scope.parts = @Html.Raw(jsonModel);
</script>

我正在尝试使用angularJS

中的filter指令过滤json中的数据

<div ng-app="myApp" ng-controller="partsController">
  Enter part Number: <input type="text" ng-model="mypart" />

    <ul>
        <li ng-repeat="x in parts | filter:mypart">
            {{x}}
        </li>
    </ul>
</div>

当我尝试运行它时，CPU和内存利用率几乎达到100％并且没有任何反应。如果有人对此有任何想法，那将是惊人的。谢谢。

Answer 1

尝试使用分页，将数据拆分为页面，让服务使用输入值的ng-change为您执行过滤。

显示更多1M行是非常多的，因此页面末尾会有很长的滚动。

使用分页时，可以减少DOM中存在的行数

Answer 2

迭代超过100万个数据项可能是一项密集型任务......有明显的方法可以通过在服务器上进行排序甚至在SQL查询中来减少客户端资源（如果查询数据库）

因为您已经专门询问角度，所以解决方法如下。

我们假设示例JSON如下所示：

{
   Part_Name: "Cog",
   Part_Number: 1
}

然后您的ng-repeat应如下所示：

<li ng-repeat="x in parts | filter:{Part_Number: mypart}">
   {{x}}
</li>

Answer 3

使用输入标记发送后端请求并传递查询参数。

如何使用角度JS和JSON对一百万行数据进行实时搜索？

3 个答案: