当前位置: 首页 > 面试题库 >

使用ng-repeat和limitTo限制显示的可见项目数

靳涵亮
2023-03-14
问题内容

我正在尝试将结果集限制为固定数量。我可以limitTo与一起使用ng- repeat,但这会限制项目,无论它们当前的可见性如何,并从DOM中删除项目。我想限制所有可见项目,同时将所有内容保留在DOM中。

这是我当前的代码。我的目标是即使列表中items包含500个项目,也始终不超过50 个项目。

<div ng-repeat="item in items | limitTo: 50">
  <div ng-show="item.visible">
    <p>item.id</p>
  </div>
</div>

最初将限制为50个项目,但是如果我过滤列表(通过修改某些项目上的item.visible),该列表将永远不会显示50-500范围内的项目,而是显示少于50个项目。限制an的正确方法是什么ng- repeat,以使其仅将可见项目计入限制?


问题答案:

您可以使用:

<div ng-repeat="item in items | filter:{visible: true} | limitTo: 50">
    <p>{{item.id}}</p>
</div>

filter:{visible: true} 将返回所有可见项目的列表

您可以查看angularjs文档,以获取有关过滤器过滤器的更多信息。
http://docs.angularjs.org/api/ng.filter:filter



 类似资料:
  • 问题内容: 我有使用Angular应用程序显示的一系列对象。我正在使用和搜索输入的值过滤掉项目。它按预期工作。但是,我有一个“全部选中” /“全部取消选中”选项,我只想选择列表中的 可见 项(那些符合当前搜索条件的项)。 在控制器中不执行相同逻辑(即在每个对象上使用搜索值)的情况下,如何确定当前由/ 过滤掉的项目? 我的看法: 我的控制器中的一个功能: 为了简化起见,我在这里大大简化了我的代码示例

  • 问题内容: 我正在尝试使用条件将项目分组为ng-repeat。 一个示例条件是将所有元素分组为同一小时。 数据: “时间”字段实际上是一个时间戳记(1399372207),但是使用准确的时间,示例输出将更易于理解。 我正在使用ng-repeat列出这些项目: 还尝试了: 有效输出为: 如果没有针对我的问题的简单解决方案,我的最后选择是将数据分组,然后将其分配给ng-repeat中使用的作用域变量。

  • 问题内容: 我想基于变量在Angular.js ng-repeat上显示不同的limitTo数字。 这是我的代码: 并在控制器中: 我只能假设有一种基于搜索输入来更改limitTo的更优雅的方法,我只是不知道要寻找什么。 您可以在http://happinesshunt.co上看到此代码的实现。 PS:我是新来的,而且是开发的新手,所以,如果未正确提出问题,请原谅我。 谢谢你! 问题答案: 这可能

  • 问题内容: 我正在尝试将$ sce.trustAsHtml()与ng- repeat中的对象属性一起使用。结果是HTML完全空白。不过,使用ngSanitize可以正确输出HTML。 顺便说一下,我正在使用AngularJS v1.3.0-beta.3。不知道是否有错误或我做错了什么。 问题答案: 您不能在表达式中使用(除非是的属性),因为表达式是在的上下文中求值的。 最干净的方法是使用。 第二种

  • 问题内容: 我有一个基于以下示例的菜单: item是一个对象,包含菜单项信息。这是指令和控制器的JavaScript代码: 问题是,套到只有一次页面渲染过程中,但是当你点击一个菜单项,没有一切发生的时候。我想这是因为菜单本身并未重新加载,而我只是在其中更改了数据。那么如何在不重新加载整个页面的情况下使它工作呢? 问题答案: 试试看:-http : //jsfiddle.net/uDPHL/146/

  • 问题内容: 嗨,我有一个简单的ng-repeat-start和end用例,并且工作正常,当我想添加一个内部ng-repeat时出现了问题。这是我的代码 内部ng-repeat到td元素中不起作用,在检查html源代码时看到ngRepeat注​​释,但未创建td元素。 我的丑陋的解决方法(假设我知道该向量的大小)是: 问题答案: 从那时起,我不确定是否使用角度1.1.6,并且在1.1.5或1.0.7