angular 下拉子菜单无法正常工作

Question

所以我的下拉菜单中有几个我无法解决的错误。

Ng-repeat 为父下拉菜单中的每个元素设置相同的子菜单，即使我试图通过范围函数或过滤器对其进行限制
每次从数组中加载最后一个对象时的函数。

和我的代码

html

<div class="dropdown category" style="position:relative">
   <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Category <span class="caret"></span></a>
    <ul class="dropdown-menu">
       <li class="dropdown" ng-repeat="entity in entitis" >
           <a class="trigger right-caret">{{ entity }}</a>
   <ul ng-if="entity | filter : 'Main'" class="dropdown-menu sub-menu">
         <li ng-repeat="domain in ast" ng-click="getDomain()">
            <a href=""> {{domain.name}}</a>
    </li>
    </ul>
    </li>
   </ul>
 </div>
{{ items }}

js

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $http) {
  $scope.name = 'Reinforcement';

  $scope.entitis = ["Main", "Submain", "Class"];

            for (var i = 0; i < $scope.entitis.length; i++){
                if ($scope.entitis[i] == "Main"){
                    $http.get('ast.json')
                        .then(function (response) {
                            $scope.ast = response.data;
                            console.log($scope.ast);
                        });
                }
            }

      $scope.getDomain = function () {
            for (var i = 0; i < $scope.ast.length; i++) {
               $scope.items = $scope.ast[i].children
            }
         }


        $(function(){
        $(".dropdown-menu > li > a.trigger").on("click",function(e){
            var current=$(this).next();
            var grandparent=$(this).parent().parent();
            if($(this).hasClass('left-caret')||$(this).hasClass('right-caret'))
                $(this).toggleClass('right-caret left-caret');
            grandparent.find('.left-caret').not(this).toggleClass('right-caret left-caret');
            grandparent.find(".sub-menu:visible").not(current).hide();
            current.toggle();
            e.stopPropagation();
        });
        $(".dropdown-menu > li > a:not(.trigger)").on("click",function(){
            var root=$(this).closest('.dropdown');
            root.find('.left-caret').toggleClass('right-caret left-caret');
            root.find('.sub-menu:visible').hide();
        });
    });

});

感谢任何帮助或建议

Answer 1

我弄清楚了它是如何工作的。 this is working plunker

和代码

js

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $http) {
  $scope.name = 'Reinforcement';

  $scope.entitis = ["Main", "Submain", "Class"];

            for (var i = 0; i < $scope.entitis.length; i++){
                if ($scope.entitis[i] == "Main"){
                    $http.get('ast.json')
                         .success(function (data) {
                        $scope.ast = data;
                        });
                }
            }

      $scope.getDomain = function (index) {
           console.info($scope.ast[index].name);
            for (var i = 0; i < $scope.ast.length; i++) {
               $scope.items = $scope.ast[index].children
            }
         }


        $(function(){
        $(".dropdown-menu > li > a.trigger").on("click",function(e){
            var current=$(this).next();
            var grandparent=$(this).parent().parent();
            if($(this).hasClass('left-caret')||$(this).hasClass('right-caret'))
                $(this).toggleClass('right-caret left-caret');
            grandparent.find('.left-caret').not(this).toggleClass('right-caret left-caret');
            grandparent.find(".sub-menu:visible").not(current).hide();
            current.toggle();
            e.stopPropagation();
        });
        $(".dropdown-menu > li > a:not(.trigger)").on("click",function(){
            var root=$(this).closest('.dropdown');
            root.find('.left-caret').toggleClass('right-caret left-caret');
            root.find('.sub-menu:visible').hide();
        });
    });


});

html

<div class="dropdown category" style="position:relative">
                                    <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Category <span class="caret"></span></a>
                                    <ul class="dropdown-menu">
                                        <li class="dropdown" ng-repeat="entity in entitis" >
                                            <a class="trigger right-caret">{{ entity }}</a>
                                            <ul ng-if="entity == 'Main'" class="dropdown-menu sub-menu">
                                                <li ng-repeat="domain in ast" ng-click="getDomain($index)">
                                                    <a href=""> {{domain.name}}</a>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </div>

                                {{ items }}

angular 下拉子菜单无法正常工作

angular dropdown submenu works incorrectly

html

javascript

angularjs

drop-down-menu

ng-repeat