CODEWITHSUNDEEP
angularjs
wangtao
wangtao

Reputation: 11

Use angularjs to do multiwindow with tabs

I am use angularjs to do a crud project, what I want the result is when I click a menu on the left then open a new tab and load the page content on the right but not replace the content ,follow the picture ,is anyone know how to do it?

enter image description here

Upvotes: 1

Views: 65

Answers (1)

Python Basketball
Python Basketball

Reputation: 2370

you can refer to AngularStrap Tabs http://mgcrea.github.io/angular-strap/#/tabs

In my project i used the AngularStrap Tabs, this is a plunker:http://plnkr.co/edit/hSg15IMOPOdGPkD6Fzfg?p=preview

html:

<!-- bsActivePane is optional -->
<div bs-active-pane="tabs.activeTab" bs-tabs>
  <div ng-repeat="tab in tabs" data-title="{{ tab.title }}" name="{{ tab.title }}" disabled="{{ tab.disabled }}" ng-bind="tab.content" bs-pane>
  </div>
</div>

js:

$scope.tabs = [
  {
    "title": "Home",
    "content": "Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica."
  },
  {
    "title": "Profile",
    "content": "Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee."
  },
  {
    "title": "About",
    "content": "Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade.",
    "disabled": true
  }
];
$scope.tabs.activeTab = "Home";

Upvotes: 1

Related Questions