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"不起作用，大概是因为它只是在ng-repeat之外/之前引用descendents in sunti.descendents

我该怎么做？

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属性返回0，那么它将被隐藏，因为它在JavaScript中是假的值，如果它将返回一些值，即number，那么它将被显示，因为它在JavaScript中是真实的值

如果要显示或隐藏，可以使用ng-show或ng-hide指令，如果要有条件地完全删除/插入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

2 个答案: