Question

我的问题是我的父母项目没有孩子，他们被称为他们的Id，其余的被称为她的孩子-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

如果我理解正确，当制造商拥有显示所有这些产品的链接的子产品时，您希望获得一些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的这两个部分是互斥的这一事实。

Answer 2

问题解决如下：

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

Angular js：如果父级没有子级，则调用父级id

2 个答案: