user3244665 user3244665 - 4 months ago 5
AngularJS Question

How to click a particular tab using Angular and how to include Angular UI in the code

I am using Angular UI Bootstrap http://angular-ui.github.io/bootstrap/. I have two questions:


  1. I followed the example given at angular-ui.github.io, there they use

    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js">


    but I don't want to use the CDN so I downloaded Angular UI and added it to my project. How to include it into my code?
    I did add
    ['ui.bootstrap']
    to my
    angular.module
    , but it's not working until I add the above script code.

  2. I'm using
    <tabset>
    to create two tabs, contacts and group. For
    example, a user is in the Group tab, he wants to add members to an existing group, so if he clicks the Add Member button, I want to navigate to the Contacts tab automatically.

    I thought of using
    document.getElementByTagName()
    inside my
    controller. Will it work? And what is the Angular way to click
    something programmatically.


Answer

Question #1:

<script src="folder_of_js/ui-bootstrap-tpls-0.10.0.js"></script>

Question #2:

You don't use document.getElementByTagName() with AngularJS, if you want to navigate to a tab while you are in another tab's content, an example might be the following:

<tabset>
   <tab ng-repeat="tab in tabs" heading="{{tab.title}}">
      {{tab.content}}
      <button class="btn btn-default btn-sm" ng-click="tabs[2].active = true">Select third tab</button>
   </tab>
</tabset>

As you can also see in this plunker, I added a button that navigates to the third tab whenever you click it.