30

我知道问这个问题绝对是愚蠢的，但我很好奇有没有办法做类似的事情：

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

   </div>
</div>
4

7 回答 7

65

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

1）一个空数组

2)An Empty String //即使是空格也被认为是真的

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>
于 2013-04-09T23:34:59.910 回答
33

AngularJS在 1.3.0 版本中做出了重大改变！

不幸的是，rajkamals 的答案不再正确。

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

  1. false
  2. null
  3. undefined
  4. NaN
  5. 0
  6. ""

值'f', '0', 'false','no'和'n'( []!) 变为真值。

所以使用

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

items如果 div 仅在包含至少 1 个元素时才可见，则不再推荐使用，因为即使使用items = []它也会显示。

相反，您可以使用

<div ng-show="items.length > 0">
    <!-- ... --->
</div>
于 2015-03-21T18:48:55.877 回答
17

在 AngularJS 中，我们不应该根据我们的视图来思考，而应该根据我们的模型来思考。

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

这是一个 ngRepeat 示例：

<div ng-show="items.length > 0">
  <div ng-repeat="item in items">
    <!-- ... -->
  </div>
</div>
于 2013-04-09T21:50:08.687 回答
4

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

一些一般的事情需要考虑。

  1. 如果您使用的是 $compile - 这是一种代码味道。在 95% 的情况下，您不需要使用 $compile。如果您正在使用 $compile，您会意识到这一点，并且您找不到任何其他方法来做您需要做的事情。您正在非常谨慎地使用它。

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

例如，这些应该与您使用 setTimeout 0 的方式相同。每当你使用它时，它应该感觉就像一个黑客。

如果您没有完全（或至少部分）控制您的 HTML（可能是服务器？）它可能会与 Angular 混淆。也许这就是为什么你要尝试做所有这些 DOM 操作的东西。

<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>

如果你被迫在很多地方做这些事情，那么也许 Angular 不是适合你的解决方案？

于 2013-04-10T08:45:53.923 回答
0

AngularJS v1.3.3 =>ng-show="items"对我不起作用，因为它评估对象 true、false、null、undefined。万一items=[]，ng-show 仍然评估为真。相反，我不得不使用：

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

并工作！感谢您的指导。

于 2015-04-17T07:54:58.663 回答
0

这也完美无缺....

<div ng-show="items.length">
<div ng-repeat="item in items">
<!-- bind to your Dom element -->
</div>
</div>
于 2015-10-24T11:12:08.093 回答
0

正如克里斯托弗指出的那样，公认的答案不再正确。因为空数组仍然评估为真。

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

当前解决方案

在这种情况下，数组存在。但是，如果您将要评估的数组的数组的零元素赋予 angular，并且没有这样的元素，它将评估为假。

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

您也可以将它与 [n] 一起用作数组中的任何编号元素，以仅在计数大于 n 时显示。如果您使用 obj.children[2]，它只会显示数组中是否有 3 个或更多元素。

于 2016-06-02T21:04:53.927 回答