Использование Factory для отображения навигации для приложения?

Question

Я все еще учусь, поэтому любые советы или улучшения будут оценены! Я ищу, чтобы создать навигацию для моего приложения с угловым выражением, используя созданную службу i, если ее можно использовать.

Быстрый Резюме Функциональность:

1. MouseOver Пользователь Parent Item
2. подменю Элемент Дисплей при активной родительского элемента

Вот что я до сих пор для моей службы Структура:

app.factory("NavigationService", function() { 
    var e = [{  
     title: "Parent1", 
     type: "parentitem", 
     children: [{ 
      title: "SubofParent", 
      type: "subitem", 
      href: "/location" 
     }] 
    }, { 
     title: "Parent2", 
     type: "parentitem", 
     children: [{ 
      title: "SubofParent", 
      type: "subitem", 
      href: "/location" 
     }] 
    }, { 
     title: "Parent3", 
     type: "parentitem", 
     children: [{ 
      title: "SubofParent", 
      type: "subitem", 
      href: "/location" 
     }] 
    } 
    }]; 
}); 

Как вы можете видеть его очень простую структуру, но то, что я хотел бы Как узнать, как я могу использовать эту структуру для ng-повторения родительских элементов, а затем отображать SubItems on Hover над определенным родительским элементом, если это имеет смысл?

Я не уверен, как построить контроллер для обработки этого метода. Любой совет о том, как достичь этого, будет отличным.

Answer 1

<li ng-repeat="item in data" > 
      <ul ng-mouseover="isChildrenVisible=true" ng-mouseleave= "isChildrenVisible=false"> {{item.title}}</ul> //parent element     
      <ul ng-show="isChildrenVisible"> 
       <li ng-repeat="child in item.children "> //child element 
        <p>{{child.title}}</p> 
       </li> 
      </ul> 
    </li> 

Здесь я делаю дочерний элемент скрытым по умолчанию (initialize isChildrenVisible varible to false). когда мышь мыши над родительским элементом, тогда я сделаю isChildrenVisible = true, а при переносе мыши я сделаю эту переменную ложной.