angular 在嵌套的 ng-repeat 中有条件地显示 div

Question

<div class="sunti_contain" ng-repeat="sunti in suntis track by $index">
            <div class="individual_sunti" ng-click="update_ancestor(sunti)">
                <!--needs a unique div#id via angularz-->
                <div class="sunti_content" ng-bind="sunti.content"></div>
                <div class="sunti_tags" ng-bind="sunti.tags"></div>
                <div class="sunti_author" ng-bind="sunti.author"></div>
                <div class="sunti_shortid" ng-bind="sunti.short_id"></div>
                <div class="sunti_ancestor" ng-bind="sunti.ancestor"></div>
            </div>
            <div class="sunti_reply_carriage_wrapper">
                <div class="sunti_reply_carriage" ng-show="!sunti.descendents.length">
                    <div class="individual_sunti reply_carriage_sunti" ng-repeat="descendent in sunti.descendents">
                        <div class="sunti_content" ng-bind="descendent.content"></div>
                        <div class="sunti_tags" ng-bind="descendent.tags"></div>
                        <div class="sunti_author" ng-bind="descendent.author"></div>
                        <div class="sunti_shortid" ng-bind="descendent.short_id"></div>
                    </div>
                </div>
            </div>
        </div>

如果在 ng-repeat 中呈现任何后代，我只想显示 div.sunti_reply_carriage。如果没有后代，我根本不希望 div sunti_reply_carriage 出现。但是，ng-show="!sunti.descendents.length" 不起作用，大概是因为它只是 outside/before 引用 descendents in sunti.descendents

的 ng-repeat

我该怎么做？

Answer 1

ng-show="!sunti.descendents.length"

如果长度大于零，上面的代码不会显示下面的代码块

例如：如果 sunti.descendents.length 是 1 那么 !1 为假，则 ng-show="false"

如果 sunti.descendents.length 为 0，则 !0 为真，则 ng-show="true"

因此，将表达式更改为 ng-show="sunti.descendents.length"

如果表达式的计算结果为 false，如果您想从 DOM 中完全删除代码块，也可以使用 ng-if。

  <div class="sunti_reply_carriage" ng-show="!sunti.descendents.length">
                        <div class="individual_sunti reply_carriage_sunti" ng-repeat="descendent in sunti.descendents">
                            <div class="sunti_content" ng-bind="descendent.content"></div>
                            <div class="sunti_tags" ng-bind="descendent.tags"></div>
                            <div class="sunti_author" ng-bind="descendent.author"></div>
                            <div class="sunti_shortid" ng-bind="descendent.short_id"></div>
                        </div>
                    </div>

Answer 2

您可以使用 sunti.descendents.length 代替 !sunti.descendents.length

如果 length 属性 returns 0 那么它将被隐藏，因为它在 JavaScript 中是假值，如果它将 return 一些值即 number 然后它将被显示，因为它是 JavaScript.

中的真值

如果你想显示或隐藏你可以使用 ng-show 或 ng-hide 指令，如果你想完全 remove/insert 有条件地 DOM 那么你可以使用ng-if 本例中的指令。

使用 ng-show 指令

<div class="sunti_reply_carriage_wrapper">
  <div class="sunti_reply_carriage" ng-show="sunti.descendents.length">
    <!-- code omitted for brevity -->
  </div>
</div>

使用 ng-if 指令

<div class="sunti_reply_carriage_wrapper">
  <div class="sunti_reply_carriage" ng-if="sunti.descendents.length">
    <!-- code omitted for brevity -->
  </div>
</div>

angular 在嵌套的 ng-repeat 中有条件地显示 div

angular conditionally show div in nested ng-repeat

conditional

angularjs

ng-repeat