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

带有ng-repeat,ng-show“显示更多”和延迟加载的Angular指令

锺离锦
2023-03-14
问题内容

我使用此指令,遍历数组“ myArr”,过滤了一些条件。

<myDirective 
    myData='item' 
    ng-repeat="item in filteredArr = (myArr | filter:searchField | filter:checkboxFilter)" 
    ng-show="$index < visible" 
/>

这给了我两个问题,我想得到一些意见:

a)ng-show部分在那里,因为我有一个条件可以处理:

<p>
    <a ng-click='visible=visible+10' ng-show='visible < filteredArr.length'>Show more</a>
</p>

为了显示或隐藏“显示更多”部分。关于切换此和/或项目本身,我无法提出另一个想法。启动后,在控制器内部将$
scope.visible设置为10。我不能使用limitTo,因为它没有给我确定是否要显示更多内容的可能性,因为它当然会将数组“切”为设置的限制。

b)在指令内,模板会打印一个

<img ng-src="...">

标签。只要上述结构中未显示这些图像,如何防止它们加载?

在此先多谢!


问题答案:

使用ng-if代替ng-show

不同于ng-show,falsey ng-if会从DOM中删除元素。

编辑:

另外,实际上,您可以使用limitTo过滤器,这将使您的代码更加简洁:

<div ng-init="limit = 2">
  <foo ng-repeat="item in items | limitTo: limit as results"></foo>
</div>
<button ng-hide="results.length === items.length" 
        ng-click="limit = limit +2">show more...</button>

矮人



 类似资料:
  • 问题内容: 我想在内容更改时创建具有自定义行为的列表。我尝试为此创建一个指令,但是我对如何将ng-transclude与ng- repeat指令结合起来感到迷茫。有人可以让我走上正轨吗? HTML: Javascript: 我已经在这里工作了一部分 编辑: 条件: 该项目的模板必须在视图中定义,而不是在指令中定义,并且必须有权访问子作用域中的项目属性。理想情况下,我想像在ng-repeat指令中那

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

  • 本文向大家介绍angular中ng一if和ng-show/hide 有什么区别?相关面试题,主要包含被问及angular中ng一if和ng-show/hide 有什么区别?时的应答技巧和注意事项,需要的朋友参考一下 1.ng一if 在后面表达式为 true 的时候才创建这个 dom 节点,ng一show 是初始时就创建了,用 display:block 和 display:none 来控制显示和不

  • 问题内容: 如果这是完全相同的内容,请纠正我,我知道这个话题经常被讨论,但是找不到确切的答案。 问题: 在MVC Web应用程序中处理Hibernate对象的最佳实用解决方案是什么? 细节: 我正在使用Hibernate,并希望在可能的情况下利用延迟加载。 我正在使用MVC风格的webapp。 我讨厌获得延迟加载初始化异常。 我讨厌不得不在事务之间重新连接Hibernate对象。 选项: 渴望装载

  • 问题内容: 我试图了解和/ 之间的区别,但对我来说它们看起来相同。 我应该记住使用一个或另一个来区别吗? 问题答案: ngIf 该指令根据表达式 删除或重新创建 DOM树的一部分。如果赋值为的表达式的计算结果为假值,则将元素从DOM中删除,否则将元素的克隆重新插入DOM中。 删除元素时,使用它的作用域将被销毁,并在恢复该元素时创建一个新的作用域。在内部创建的作用域使用原型继承从其父作用域继承。 如

  • 问题内容: 以下AngularJS应用程序正在使用ng-repeat和已应用的过滤器。某个应用的过滤器不会留下任何值。如何显示通知? js小提琴 的HTML AngularJS 问题答案: 我认为这是您想要的: 链接 这是另一个FIDDLE LINK,请检查此