AngularJS - 带有许多“选择”元素与ng-repeat构建的表格需要很长的时间

我有一个可变数量的记录（可能高达数百个）的表格，它的主体是用一个ng-repeat构建的。AngularJS - 带有许多“选择”元素与ng-repeat构建的表格需要很长的时间

在每条记录，有select类型，其中的内容也使用ng-repear和每个选项的数目内置的两个输入字段约为100

这是工作，现在，除了它需要一个很多时间用于构建页面（几秒钟;我猜是由于AngularJS添加到DOM的大量html记录）。

这里是select S的一个示例：

<select class="form-control" ng-model="One_Source.Measuring_Method_Code"> 
    <option ng-selected="{{One_Method.Value == One_Source.Measuring_Method_Code}}" 
      ng-repeat="One_Method in All_Collections.Parameters_Test_Methods" 
      value="{{One_Method.Value}}" 
      title="{{One_Method.Test_Method_Name}} | {{One_Method.Method_Internal_Name}}"> 
      {{One_Method.Value}} 
    </option> 
</select>

两个问题：

有没有一种简单的方法来加快网页建设进程？
如示例中所示，在列表中的每个选项具有title条款显示的选项的意思的详细描述。如何将title添加到显示当前值描述的select？

因为我在想只在点击它的建设对每个select元素选项列表中的第一个问题，但我不知道这会做到这一点的最好办法。

在此先感谢您的任何建议。

来源

2017-06-26 FDavidov

你可以尝试添加'ng-repeat =“One_Method在One_Method._id的All_Collections.Parameters_Test_Methods跟踪中”，通过添加内部缓存来追踪，通常是添加和删除数据时，它只添加和删除它所需的内容，而不是重新绘制所有html元素。如果你没有'One_Method'对象上的唯一键，您还可以通过$ index' –

使用'轨道谢谢@ShannonHochkins。请参阅我的评论doublesharp的建议。 – FDavidov

尝试使用one time bindings，以便Angular不会在::前加上值。如果每行都具有唯一值（如ID），则在ng-repeat中使用track by也可能更有效。

<option 
    ng-selected="{{One_Method.Value == One_Source.Measuring_Method_Code}}" 
    ng-repeat="One_Method in All_Collections.Parameters_Test_Methods track by One_Method.id" 
    value="{{::One_Method.Value}}" 
    title="{{::One_Method.Test_Method_Name}} | {{::One_Method.Method_Internal_Name}}" 
> 
    {{::One_Method.Value}} 
</option>

来源

2017-06-26 04:46:17 doublesharp

你可以“通过One_Method.id One_Method在:: All_Collections.Parameters_Test_Methods轨道”进一步采取这一步骤中加入'NG-重复=' –

谢谢doublesharp和您的建议@ShannonHochkins但不幸的是，我看到没有显着的改善页面的构建（顺便说一下，如果我注释掉select的“选项”部分，它几乎可以立即响应，比如不到一秒钟）。 – FDavidov

嘿soublesharp，请大家看看，我张贴的答案，让我知道你怎么想这个方法。 – FDavidov

如果仍然不能获得你从@ doublesharps的答案预期的表现，你将不得不执行下列操作之一：

你可以建立具有自定义列表'加载更多'按钮，这会破坏第一个'50'选项并加载下一个50.
更好的选择是将其转换为用户搜索值的自动完成。
虚拟重复 - 某些有角度的材质确实很好，它会根据元素内的滚动位置不断绘制并重新绘制新元素。

其他资源：

来源

2017-06-26 05:18:59

嘿香农，请看看我发布的答案，让我知道你对这种方法的看法。 – FDavidov

我发现了一个部分解决仍然需要抛光，但还是比较看好的。

在创建过程中的页面的，我不使用ng-repeat的选项，但与收到的字段从数据库中的值，而不是部署一个选项（如果有的话，否则选择元素留空）。

当用户点击select元素时，会调用一个$scope函数来检查select元素中的选项数量，如果小于或等于1，则重新生成并部署此select元素的内部HTML。

尽管点击页面中的所有这些选择将会花费与累计时间相当的时间（这个时间分布在多个事件上（用户点击所有选择元素），因此它不会被感知由用户。

现在，抛光我的意思是，有一个奇怪的行为。为了查看生成的选项列表，我需要点击两次选择。将继续调查并发布解决方案（希望我找到一个）。

来源

2017-06-26 12:03:41 FDavidov

这应该会带来更好的用户体验，因为它们并非全部在显示页面之前生成，而是整体性能相似。如果它工作，它虽然工作！ – doublesharp

那么@doublesharp，正如它所说的**几乎**的工作。问题在于第一个点击事件用于填充选择列表，然后奇怪地显示它。只有第二次和随后的特定选择点击才能根据需要进行显示。我真的不知道如何解决这个问题。有任何想法吗？ – FDavidov

渲染与100种元素选择列表中不应该是什么大不了的事 - 你尝试使用['NG-options'（https://docs.angularjs.org/api/ng/directive/ngOptions）用'跟踪“和我建议的单向绑定？你确定滞后不是由应用程序获取'All_Collections'的值引起的吗？ – doublesharp

AngularJS - 带有许多“选择”元素与ng-repeat构建的表格需要很长的时间

回答

相关问题