Содержимое вкладки AngularJS

Как я должен это реализовать:Содержимое вкладки AngularJS

4 вкладки, которые открываются onclick и загружают представление ребенку.

Пробовал с 4 нг-тегами и скрыл 3 из них, но он не чувствует себя хорошо. Как отобразить мой контент на правой вкладке?

<section id="tabs"> 
    <div class="tab open"> 
     <div ng-view></div> 
    </div> 
    <div class="tab"> 
     <div ng-view></div> 
    </div> 
    <div class="tab"> 
     <div ng-view></div> 
    </div> 
    <div class="tab"> 
     <div ng-view></div> 
    </div> 
</section>

источник

2014-02-20 user1655758

Angular UI bootstrap module имеет все компоненты начальной загрузки щебета перенесены в угловых модулей. Вы должны использовать его вместо того, чтобы изобретать его (если вы не можете/не хотите использовать twitter bootstrap).

tldr: Попробуйте использовать бутстрэпы ушек компоненты из углового UI самозагрузкой

источник

2014-02-20 19:05:53 Selva

вы должны использовать загрузчик для вкладок и нг-включает содержание что-то вроде этого

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<!-- Le styles --> 
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet"> 
<script src="http://code.angularjs.org/1.2.12/angular.min.js"></script> 
<script src="http://code.angularjs.org/1.2.12/angular-cookies.min.js"></script> 
<script src="http://code.angularjs.org/1.2.12/angular-route.min.js"></script> 
<script src="http://code.angularjs.org/1.2.12/angular-resource.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
</head> 

<body> 

<div class="container"> 

<!--------> 
<div id="content"> 
    <ul id="tabs" class="nav nav-tabs" data-tabs="tabs"> 
     <li class="active"><a href="#red" data-toggle="tab">Red</a></li> 
     <li><a href="#orange" data-toggle="tab">Orange</a></li> 
     <li><a href="#yellow" data-toggle="tab">Yellow</a></li> 
    </ul> 
    <div id="my-tab-content" class="tab-content"> 
     <div class="tab-pane active" id="red"> 
      <div ng-include src="'red.html'"></div> 
     </div> 
     <div class="tab-pane" id="orange"> 
      <div ng-include src="'orange.html'"></div>     
     </div> 
     <div class="tab-pane" id="yellow"> 
      <div ng-include src="'yellow.html'"></div> 
     </div> 
    </div> 
</div> 


<script type="text/javascript"> 
    jQuery(document).ready(function ($) { 
     $('#tabs').tab(); 
    }); 
</script>  
</div> <!-- container --> 

<script type="text/javascript" src="../bootstrap/js/bootstrap.js"></script> 

</body> 
</html>

источник

2014-02-20 19:35:37

Содержимое вкладки AngularJS

ответ

Смежные вопросы