Угловые ЯШ: вызвать родительский идентификатор, если родитель не имеет детей

Question

Моя проблема заключается в том, что у меня есть родители пункта, которые не имеют детей, они называют их Ид, остальные называли с детьми-ID

контроллер:

var listContent = angular.module('app', []); 
listContent.controller('Cnt', function($scope) { 
    $scope.products = [{ 
     "id": 10, 
     "name": "Samsung", 
     "children": [{ 
      "id": 1122, 
      "name": "Galaxy S5" 
     }, { 
      "id": 1123, 
      "name": "Galaxy Note 4" 
     }, { 
      "id": 1124, 
      "name": "Galaxy S5 Mini" 
     }] 
    }, { 
     "id": 11, 
     "name": "LG", 
     "children": [{ 
      "id": 25, 
      "name": "L70" 
     }, { 
      "id": 23, 
      "name": "G2" 
     }, { 
      "id": 24, 
      "name": "G3" 
     }] 
    }, { 
     "id": 12, 
     "name": "own", 
     "children": [] 
    }]; 
}); 

     **html code:** 

<nav> 
    <div data-ng-class="procedures" data-ng-controller="Cnt"> 
     <ul data-ng-repeat="parent in products"> 
      <li> 
       <h4 data-ng-click="showDetails = ! showDetails"> 
        <a>{{parent.name}}</a> 
       </h4> 

      ** bei product "own", should call the parent-id , it should look like 
       <h4> 
         <a data-ng-href="http://....{{parent.id}}">{{parent.name}}</a> 
        </h4> 
      ** 
        <ul class="procedure-details" data-ng-class="{ 'hidden': ! showDetails }"> 

         <li data-ng-repeat="child in parent.children"> 
          <a data-ng-href="http://....{{child.id}}">{{child.name}}</a> 
         </li> 
        </ul> 
      </li> 
     </ul> 
    </div> 
</nav> 

CSS

<style type="text/css"> 
     li { 
      list-style: none; 
      padding: 0px; 
      border-bottom: 1px solid #eee; 
     } 

     .procedure-details { 
      max-height: 100px; 
      transition: .5s; 
      overflow: hidden; 
      background: #fff; 
      font-size: 13px; 
     } 

     .procedure-details.hidden { 
      max-height: 0; 
     } 

     ul { 
      margin: 0; 
      padding: 0; 

     } 

     nav { 
      font-family: Helvetica, Arial, "Lucida Grande", sans-serif; 
      line-height: 2; 
      width: 100%; 

     } 
     </style> 

Answer 1

Проблема решается следующим образом:

<li data-ng-click="showDetails = ! showDetails"> 
       <h4 data-ng-if="!parent.children.length"> 
        <a href="https://">{{parent.name}}</a> 
       </h4> 
       <h4 data-ng-if="parent.children.length"> 
        <a>{{parent.name}}</a> 
       </h4> 
        <ul class="procedure-details" 
        data-ng-class="{ 'hidden': ! showDetails }"> 
        <li data-ng-click="showDetails = showDetails" 
         data-ng-repeat="child in parent.children"><a 
         data-ng-href="http://">{{child.name}}</a></li> 
       </ul> 
      </li> 

Answer 2

Если я правильно понимаю, вы хотите иметь некоторый HTML, когда производитель имеет дочерние продукты, которые показывают ссылки на все эти продукты. Если у производителя нет каких-либо продуктов, тогда вы хотите показать ссылку на производителя.

Один из способов сделать это - использовать директиву ng-if для переключения между различными html.

<h4 ng-if="!parent.children.length"> 
    <a data-ng-href="http://....{{parent.id}}">{{parent.name}}</a> 
</h4> 

<ul ng-if="parent.children.length" class="procedure-details" data-ng-class="{ 'hidden': ! showDetails }"> 

    <li data-ng-repeat="child in parent.children"> 
     <a data-ng-href="http://....{{child.id}}">{{child.name}}</a> 
    </li> 
</ul> 

Это работает, потому что длина будет 0, если массив дочерних элементов пуст, что является ложным значением.

Также рассмотрите возможность использования директивы ng-switch, чтобы лучше документировать факт, что эти два раздела html являются взаимоисключающими.