AngularJS Navigation（li ng-repeat，创建标题li），DOM

i have a problem with AngularJS by creating a navigation.

我通过创建导航来解决AngularJS的问题。

My question is al little bit complicated posted. All i want i to create a nav like the last working example.

我的问题有点复杂。我想要我创建一个类似于最后一个工作示例的导航。

My code works, but create not the DOM that i want.

我的代码有效,但不是创建我想要的DOM。

Routes:

.when("/users", {
      templateUrl: "routes/users/template.html",
      controller: "usersCtrl",
      icon: "fa fa-users",
      name: "Users",
      group: "Settings"

    }).when("/plugins", {
      templateUrl: "routes/plugins/template.html",
      controller: "pluginsCtrl",
      icon: "fa fa-plus",
      name: "Plugins",
      group: "Settings"

    }).when("/server", {
      templateUrl: "routes/server/template.html",
      controller: "serverCtrl",
      icon: "fa fa-server",
      name: "Server (HTTP/HTTPS)",
      group: "Experte Settings"

    }).when("/database", {
      templateUrl: "routes/database/template.html",
      controller: "databaseCtrl",
      icon: "fa fa-database",
      name: "Database",
      group: "Experte Settings"

    }).otherwise({
      redirectTo: "/"
    });

Navigation Factory:

factory('routeNavigation', function($route, $location) {
  
  // placeholder
  var routes = [];
  var groups = [];
  
  // ignore angularjs created routes
  angular.forEach($route.routes, function (route, path){
    if(route.name){
      
      // add nav element
      routes.push({
        path: path,
        name: route.name,
        icon: route.icon,
        group: route.group
      });
            
      // add nav group (when not exists)
      if(groups.indexOf(route.group) === -1){
        groups.push(route.group);  
      }
      
    }
  });
  
  // return
  return {
    routes: routes,
    groups: groups,
    activeRoute: function (route) {
      return route.path === $location.path();
    }
  };
  
});

Navigation directive:

directive('navigation', function(routeNavigation){
  return {
    restrict: "E",
    replace: true,
    templateUrl: "sidebar.html",
    controller: function($scope){
      $scope.navRoutes = routeNavigation.routes;
      $scope.navGroups = routeNavigation.groups;
      $scope.activeRoute = routeNavigation.activeRoute;
    }
  };
});

Sidebar.html:

<ul class="sidebar-menu">

 
 <li class="header" ng-repeat="group in navGroups">{{group}}</li>
 
 <li class="" ng-repeat="route in navRoutes" ng-class="{active: activeRoute(route)}" > 
  <a href="#!{{route.path}}" ><i class="{{route.icon}}"></i><span>{{route.name}}</span></a>
 </li>

</ul>

The problem is that an li element for a header have this syntax:

问题是标头的li元素具有以下语法:

<li class="header">Header name</li>

And a regular li element:

和常规的li元素:

<li class="">
<a href="#!/database" ><i class="fa fa-database"></i><span>Database</span></a>
 </li>

In my example the headers are on top (expected) before the elements. With the issue there all on top (stacked).

在我的示例中,标题位于元素之前(预期)。问题就在那里(堆叠)。

A working nav looks like this:

工作导航看起来像这样:

<li class="header">Header</li>
<li class=""><a href="#!/" ><i class="fa fa-.."></i><span>Example 1</span></a></li>
<li class=""><a href="#!/" ><i class="fa fa-.."></i><span>Example 2</span></a></li>
<li class=""><a href="#!/" ><i class="fa fa-.."></i><span>Example 3</span></a></li>
<li class="header">Another Header</li>
<li class=""><a href="#!/" ><i class="fa fa-.."></i><span>Example 1</span></a></li>
<li class=""><a href="#!/" ><i class="fa fa-.."></i><span>Example 2</span></a></li>
<li class=""><a href="#!/" ><i class="fa fa-.."></i><span>Example 3</span></a></li>

How can i create this with angluar?

我如何用angluar创建这个?

Can i break the angluar ng-repeat and wait to finis insert first header, then repeat all elements with this group (header), break, insert second header, continue ng-repeat with the second group ?

我可以打破angluar ng-repeat并等待finis插入第一个标题,然后重复所有元素与此组(标题),中断,插入第二个标题,继续ng-repeat与第二组?

Or what the best solutions for this problem?

或者这个问题的最佳解决方案是什么?

Thanks a lot.

非常感谢。

2 个解决方案

#1

Try with below code it may helpful for you

尝试使用以下代码,它可能对您有所帮助

            <li class="" ng-repeat="route in navRoutes" ng-class="{active: activeRoute(route)}" > 
              <a ng-if="route.path" href="#!{{route.path}}" ><i class="{{route.icon}}"></i><span>{{route.name}}</span></a>
              <span ng-if="!route.path">{{route.name}}</span>
            </li>


            var navRoutes = [
                {
                    name:"header1"
                },
                {
                    name:"ex1",
                    path:"/",
                    icon:"act"
                },
                {
                    name:"ex2",
                    path:"/",
                    icon:"act"
                },
                {
                    name:"ex3",
                    path:"/",
                    icon:"act"
                },
                {
                    name:"header2"
                },
                {
                    name:"ex1",
                    path:"/",
                    icon:"act"
                },
                {
                    name:"ex2",
                    path:"/",
                    icon:"act"
                },
                {
                    name:"ex3",
                    path:"/",
                    icon:"act"
                }
            ]

#2

Soulution:

sidebar.html

 <li class="" ng-repeat="route in navRoutes" ng-class="{active: activeRoute(route), 'header': !route.path}" > 
  <a ng-if="route.path" href="#!{{route.path}}"><i class="{{route.icon}}"></i><span>{{route.name}}</span></a>
  <span ng-if="!route.path">{{route.name}}</span>
 </li>

navigation factory:

.factory('routeNavigation', function($route, $location) {
  
  // placeholder
  var routes = [];  
  var groupBefore = null;
  
  // ignore angularjs created routes
  angular.forEach($route.routes, function (route, path){
    if(route.name){
      
      // add group header
      if(groupBefore === null || groupBefore !== route.group){
        groupBefore = route.group;
        routes.push({
          name: route.group
        });
      }
      
      // add nav element
      routes.push({
        path: path,
        name: route.name,
        icon: route.icon,
        group: route.group
      });
      
    }
  });

#1