Angularjs ngHide或ngShow基于子项的数量

我知道问这个问题绝对是愚蠢的，但我很好奇 有没有一种方法可以这样做：

<div ng-show='this.children.length > 0'> // shown
   <div>

   </div>
</div>

//显示

在AngularJS中，我们不应该从我们的观点出发，而应该从我们的模型出发

因此，您应该问问自己是什么在您的元素中生成了内容。如果它是动态的，则来自您的模型。那么，您可以访问什么模型属性来提供所需的信息呢

下面是一个示例：

---

要添加到@Josh David Miller answer中，以下值在角度上被认为是虚假的

1） 空数组

2） 空字符串//即使是空格也被认为是真的

3） 带false的布尔值

4） 未定义

5） 空的

6） 0

大卫的回答可以写成

<div ng-show="items.length">
  <div ng-repeat="item in items">
    <!-- ... -->
  </div>
</div>

甚至更短

<div ng-show="items">
  <div ng-repeat="item in items">
    <!-- ... -->
  </div>
</div>

---

看到您的大多数问题，您可能没有以“正确”的方式使用Angular，也可能无法使用Angular（可能是因为项目限制！）

一些需要考虑的一般性问题

如果您使用的是$compile，那么这是一种代码味道。在95%的情况下，您不需要使用$compile。如果您使用的是$compile，那么您已经意识到了这一点，并且找不到任何其他方法来完成您需要做的事情。你使用它时非常小心

如果您正在“查询”DOM以执行任何操作，那么这可能也是一种气味。同样，在95%的情况下，你不需要这样做。这里正确的方法是修改模型并让Angular处理DOM

例如，使用setTimeout 0的方法应该与使用setTimeout 0的方法相同。无论何时你使用它，它都会让你感觉像一个黑客

如果您不能完全（或至少部分）控制HTML（服务器可能是？），它可能会变得混乱。也许这就是为什么您要尝试做所有这些DOM-y操作的原因

<div ng-show='this.children.length > 0'> // shown
   <div>

   </div>
</div>

//显示

这是一个我们不确定谁在控制的例子。如果您有权访问生成此html的构造，还可以使用ng init编写它

<div ng-init="childElements = {{serverside variable}}" ng-show='childElements > 0'> // shown
   <div server-side-repeat>

   </div>
</div>

//显示

如果你被迫在很多地方做这些事情，那么AngularJS可能不是适合你的解决方案。

AngularJS做了一个很好的选择！ 不幸的是，拉贾马尔斯的答案不再正确

从这个版本开始，只有这6个值被认为是错误的：

false

null

未定义

NaN

0

”

值

'f'

，

'0'

，

'false'

，

'no'

，

'n'

和

[]

（！）变得真实

所以使用

<div ng-show="items">
    <!-- ... --->
</div>

---

AngularJS v1.3.3=>

ng show=“items”

对我不起作用，因为它计算对象true、false、null和未定义。如果

items=[]

，则ng show的计算结果仍然为true。相反，我不得不使用：

<div ng-show="items.length">
    <!-- ... --->
</div>

---

而且成功了！！谢谢你的指导。

这也很好用

<div ng-show="items.length">
<div ng-repeat="item in items">
<!-- bind to your Dom element -->
</div>
</div>

---

正如克里斯托弗指出的，公认的答案不再正确。因为空数组仍然计算为truthy

obj.children = []
<div ng-show='obj.children'> 
  As of Angular 1.3 this always shows if children exists as part of obj. 
</div>

obj.children=[]
从Angular 1.3开始，这始终显示子对象是否作为obj的一部分存在。

当前解决方案 在本例中，数组存在。但是如果你给数组的零元素赋值，而没有这样的元素，它将被赋值为false

<div ng-show='obj.children[0]'> 
  This will not show because there is no element in the array at 0
</div>

这不会显示，因为0处的数组中没有元素

您还可以将它与[n]一起用作数组中的任何编号元素，以仅在计数大于n时显示。

---

如果您使用obj.children[2]，它只会在数组中有3个或更多元素时显示。

我正在尝试将asp.net的不引人注目的验证和角度验证结合起来。到目前为止没有成功：（我认为asp.net和angular可以很好地工作。可能是不引人注目的验证部分导致了你的悲伤。你不能用angular进行客户端验证吗？是的，我已经尝试过了，但是当你对项目应用过滤器时会怎么样？然后呢？我有一个确切的场景，但是有一个过滤器检查我的问题：这个不再正确！AngularJS在1.3.0版中进行了突破性的更改，他们删除了一些错误值，包括空数组

[]

。请参见我的答案：如果能展示如何正确处理新的突破性更改，那就太好了。@KornelitoBenito应该是

ng show=“items.length>0”

，但鉴于我已经有一段时间没有使用angular，我很犹豫是否要添加此项。如果您已经测试过此项，请随意添加！此项功能非常有魅力！

<div ng-show='obj.children[0]'> 
  This will not show because there is no element in the array at 0
</div>