角度有條件地顯示div嵌套ng重複

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

我想只顯示div.sunti_reply_carriage，如果有任何後代呈現在ng重複。如果沒有後代，我不希望div sunti_reply_carriage出現。但是，ng-show="!sunti.descendents.length"不起作用，大概是因爲它只是在ng-repeat之前/之前引用descendents in sunti.descendents角度有條件地顯示div嵌套ng重複

我該怎麼做？

來源

2016-10-02 sova

你可以嘗試用NG-秀= 「sunti.descendents.length> 0」 –

感謝我做'NG-如果=「sunti.descendents.length> 0」'在我的包裝div和它的竅門！ =）將它作爲答案添加並且將其作爲答案（如果需要的話） – sova

您也可以使用ng-if =「sunti.descendents.length」，因爲除了0之外的任何數字都將始終評估爲true –

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

以上代碼不顯示如下代碼塊，如果長度大於零

例如：！如果sunti.descendents.length是1，那麼 1是假，則NG-節目=「假」

如果sunti.descendents.length是0，那麼！0爲真，那麼NG-秀= 「真」

因此，表達式更改爲ng-show="sunti.descendents.length"

如果您希望完全刪除DOM中的代碼塊（如果表達式計算結果爲false），則可以使用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>

來源

2016-10-02 04:46:34

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

如果length屬性返回0，那麼它將會被隱藏，因爲它是在JavaScript falsey價值，它是否會返回一些值即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>

來源

2016-10-02 04:50:08

角度有條件地顯示div嵌套ng重複

回答

相關問題