javascript - 子列表中的清晰结果

Question

我正在处理子菜单列表。首先，我从 json 文件获取信息，并显示第一个结果。其中一些结果具有“x”个子级别数量。这是我的代码的一部分:

function getCategories(){
        $http.get('/app/json/categories.json')
        .then(function(data){
            $scope.categoriesList = data.data.categories;
            //console.log($scope.categoriesList);
        });
    }

    $scope.theSublevels = function(x){
        $scope.inside = x.sublevels;
        //console.log($scope.inside);
    }

    $scope.nextSublevel = function(y){
        $scope.inception = y.sublevels;
        //console.log($scope.inception);
    }

在我的 html View 上:

<ul>
    <li class="listagem" ng-repeat="category in categoriesList">
      <a ng-click="theSublevels(category)">{{category.name}}</a>
        <ul>
          <li class="segunda-listagem" ng-repeat="next in inside">
            <a href="" ng-click="nextSublevel(next)">{{next.name}}</a>
              <ul>
                    <li class="sub-sublistagem" ng-repeat="other in inception">
                        <a href="">{{other.name}}</a>
                    </li>
                </ul>
          </li>
        </ul>
    </li>
</ul>

除了三个级别打开以及父类别{{category.name}}发生变化时，一切都会找到。第一个结果发生变化，但子级别保持不变，直到我单击新的第一个子级别。我该怎么做才能清除下一个子级别并仅显示第一个子级别？

我正在使用 AgularJs 和 Javascript。

提前致谢。

Answer 1

<ul>
    <li class="listagem" ng-repeat="category in categoriesList">
      <a>{{category.name}}</a>
        <ul>
          <li class="segunda-listagem" ng-repeat="next in category.sublevels">
            <a href="">{{next.name}}</a>
              <ul>
                    <li class="sub-sublistagem" ng-repeat="other in next.sublevels">
                        <a href="">{{other.name}}</a>
                    </li>
                </ul>
          </li>
        </ul>
    </li>
</ul>

点击时不需要提取子内容，可以直接绑定(bind)它们。像上面那样尝试一下。