Угловое условное отображение div в гнезде ng-repeat

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> 

Я хочу показать только div.sunti_reply_carriage, если в ng-repeat есть какие-либо потомки. Если нет потомков, я не хочу, чтобы div sunti_reply_carriage появлялся вообще. Однако ng-show="!sunti.descendents.length" не работает, по-видимому, потому, что он находится только снаружи/перед повторением ng, который ссылается descendents in sunti.descendents

Как это сделать?

Answer 1

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

Приведенный выше код не показывает следующий блок кода, если длина больше нуля

Ex: Если sunti.descendents.length 1, то 1 ложно, то нг-шоу = «ложь»

Если sunti.descendents.length равен 0, то! 0 верно, то нг-шоу = "истинный"

Таким образом, изменить выражение ng-show="sunti.descendents.length"

Вы можете использовать ng-if, если вы хотите полностью удалить блок кода из DOM, если выражение принимает значение false.

<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

If length возвращается собственности 0, то он будет скрыт, потому что это falsey значение в 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>