menù multilivello Leftside con ionica, angularjs, bootstrap di lavoro 3 non ha ancora correttamente

Ho bisogno di questo enter image description here menù multilivello Leftside con ionica, angularjs, bootstrap di lavoro 3 non ha ancora correttamente

questo è il codice di controllo:

$scope.sideNavMenu = 
{ 
    title: "User Manual", 
    subMenu: [ 
    { 
     title: "Title one", 
     link: "index/titleone.html", 
     icon:"fa fa-caret-down", 
     subMenu: [] 
    }, 
    { 
     title: "Basic", 
     link: "index/basic/basic.html", 
     icon:"fa fa-caret-down", 
     subMenu: [ 
     { 
      title: "Basic Function", 
      link: "index/basic/function.html", 
      icon:"fa fa-caret-down", 
      subMenu: [] 
     }] 
    }] 
};

sono stato due settimane cercando di risolvere. per favore qualcuno può aiutarmi?

questo è quanto è andato

<div id="MainMenu"> 
    <div class="list-group panel"> 
     <a href="#mainMenuContainer" class="list-group-item list-group-item-success strong" data-toggle="collapse" data-parent="#MainMenu"> 
     <i class="fa fa-home"></i> 
     {{sideNavMenu.title}} 
     <i class="fa fa-caret-down"></i> 
     </a> 
    <div ng-include ng-if="sideNavMenu.subMenu.length > 0" ng-repeat="navMenu in sideNavMenu.subMenu" onload="data = navMenu" src="'menuTemplate.html'"class="collapse" id="mainMenuContainer"> 
    </div> 
</div>

modello

<script id="menuTemplate.html" type="text/ng-template"> 

    <a ng-href="#{{ (data.subMenu.length > 0) && data.link || ''}}" class="list-group-item {{(data.subMenu.length > 0) && 'strong' || ''}}" data-toggle="collapse" data-parent="{{data.link}}">{{data.title}}<i class="fa fa-caret-down"></i></a> 

    <div ng-include ng-repeat="navMenu in data.subMenu" onload="data = navMenu" src="'menuTemplate.html'" class="list-group-submenu" ng-if="data.subMenu.length > 0" ng-attr-id="{{data.link}}"> 
    </div> 

</script>

here an example that i use to understand

e questo è il risultato

enter image description here

quando scatto nulla happends

Console: Errore di sintassi, l'espressione non riconosciuta: indice/titleone.html

fonte

2014-07-18 andrescabana86

È possibile copiare il collegamento, esattamente come viene visualizzato nel menu?Forse ha bisogno di un "#" cancelletto all'interno dell'URL per farlo funzionare. –

Title one – andrescabana86

Il menu è fondamentalmente solo un mucchio di liste annidate; dopo aver guardato this post, sono stato in grado di prendere il vostro struttura dei dati sottomenu e adattarlo per generare un semplice elenco:

HTML

<div ng-app> 
<script type="text/ng-template" id="menu-renderer"> 
    {{item.title}}  
    <ul ng-if="item.subMenu && item.subMenu.length > 0"> 
     <li ng-repeat="item in item.subMenu" ng-include="'menu-renderer'"></li> 
    </ul> 
</script> 

    <div ng-controller="MenuCtrl"> 
    <ul> 
     <li ng-repeat="item in subMenu" ng-include="'menu-renderer'"></li> 
    </ul> 
    </div> 
</div>

Javascript

function MenuCtrl($scope) { 
$scope.subMenu = [ 
{ 
    title: "User Manual", 
    subMenu: [ 
    { 
     title: "Title one", 
     link: "index/titleone.html", 
     icon:"fa fa-caret-down", 
     subMenu: [] 
    }, 
    { 
     title: "Basic", 
     link: "index/basic/basic.html", 
     icon:"fa fa-caret-down", 
     subMenu: [ 
     { 
      title: "Basic Function", 
      link: "index/basic/function.html", 
      icon:"fa fa-caret-down", 
      subMenu: [] 
     }] 
    }] 
}]; 
}

ho this fiddle se ti piacerebbe vederlo in azione.

Questo aiuto?

fonte

2014-07-22 02:29:24 Blaskovicz

non ha aiutato, il problema è che quando faccio clic sul menu non collassi o espandi, non succede niente ... ma bella prova – andrescabana86

Questo è un esempio di livello infinito di fisarmoniche Bootstrap 3 a livello infinito che funzionano con Bootstrap Angular e Angular-UI. Questo codice può (e deve) certamente essere migliorato come indicato in questo post, ma dimostra che essi possono lavorare insieme e come si potrebbe fare per fare che: Looping through deep objects in ng-repeat

index.html

<head> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.min.js"></script> 
    <script src="example.js"></script> 
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> 
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> 
</head> 

<body> 

    <div ng-controller="AccordionDemoCtrl"> 
    <accordion close-others="oneAtATime"> 
     <accordion-group heading="Home" is-open="getOpenedStatus" ng-init="setOpenedStatus(false);"> 
     <accordion-heading> 
      <a class="accordion-toggle"> 
      <i class="fa fa-home"></i> 
      Home 
      </a> 
     </accordion-heading> 
     <accordion close-others="oneAtATime"> 
      <accordion-group ng-repeat="group in group.groups" is-open="getOpenedStatus" ng-init="setOpenedStatus(true);"> 
      <accordion-heading> 
       <a class="accordion-toggle"> 
      {{group.title}} 
      </a> 
      </accordion-heading> 
      {{group.content}} 
      <div nested-item> 
      </div> 
      </accordion-group> 
     </accordion> 
     </accordion-group> 
    </accordion> 
    </div> 
</body> 

</html>

example.js

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

var groups = { 
    groups:[ 
    { title: "Dynamic Title 1", content: "Dynamic content 1" }, 
    { title: "Dynamic Title 2", content: "Dynamic content 2", groups: [ 
     {title: "Subnav Title 1", content:'Subnav content 1'}, 
     {title: "Subnav Title 2", content:'Subnav content 2', groups:[ 
     {title: "Sub-subnav Title1", content: 'subsubnav content 1'} 
     ]} 
    ]} 
]}; 

function AccordionDemoCtrl($scope) { 
    $scope.isMenuOpenedInitially = false; 

    $scope.staticTitle = "Static Title"; 

    $scope.group = groups; 

    $scope.setOpened = function(isOpened) { 
     $scope.opened = isOpened; 
    }; 

    $scope.getOpenedStatus = function() { 
    return $scope.opened; 
    }; 

    $scope.toggleRoot = function(){ 
    return isMenuOpenedInitially; 
    }; 

} 

app.directive('nestedItem', ['$compile', function($compile){ 
    return { 
     restrict: 'A', 
     link: function(scope, element){ 
      // alert(scope.group.groups); 
      if (scope.group.groups){ 
       // var html=$compile('<h1>test</h1>')(scope); 
       // var html = $compile('<ul><li nested-item ng-repeat="group in group.groups">{{group.title}}</li></ul>')(scope); 
       var html=$compile(''+ 
        '<accordion close-others="oneAtATime">' + 
        '<accordion-group ng-repeat="group in group.groups" is-open="opened" ng-init="setOpened(true);">'+ 
         '<accordion-heading>' + 
         '<a class="accordion-toggle" ng-click={{opened}}>'+ 
          '{{group.title}}'+ 
         '</a>'+ 
         '</accordion-heading>'+ 
         '{{group.content}}'+ 
         '<div nested-item>'+ 
         '</div>'+ 
        '</accordion-group>'+ 
        '</accordion>' 
       )(scope); 
       element.append(html); 
      } 
     } 
    }; 
}]);

http://plnkr.co/edit/R5RW3W

fonte

2014-07-23 22:08:14 JimTheDev

In generale, ciò che si sta tentando di fare è una visualizzazione ad albero. Controllare il codice sorgente di: http://ngmodules.org/modules/angular.treeview e/o cercare altri esempi di implementazione di questi e adattarli alle proprie esigenze.

fonte

2014-07-27 17:19:41 Zentoaku

menù multilivello Leftside con ionica, angularjs, bootstrap di lavoro 3 non ha ancora correttamente

risposta

Problemi correlati