Angular js : call the parent id, if parent has no children - angularjs

Question

My problem is that I have parents item that do not have children, they are called with their Id, the remaining called with her children-id
controller:
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

If I understand correctly, you want to have some html when a manufacturer has child products which shows links to all of those products. If a manufacturer does not have any products then you want to show a link to the manufacturer instead.
One way of doing this is using the ng-if directive to switch between different 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>
This works because the length will be 0 if the array of children is empty, which is a falsey value.
Also consider using the ng-switch directive to better document the fact that these two sections of html are mutually exclusive.

Answer 2

Problem solved as follows :
<li data-ng-click="showDetails = ! showDetails">
<h4 data-ng-if="!parent.children.length">
{{parent.name}}
</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>