點擊鏈接並打開相應的選項卡

Question

我正在試用bootstrap，angularjs。所以我將模式窗口中的導航標籤推入並通過鏈接點擊打開此模式。但我想直接點擊打開適當的標籤。如果我點擊旅行，我想要去旅行選項卡等。我應該用什麼來解決這個問題？也許我需要模擬點擊或類似的東西？ http://jsfiddle.net/3kgbG/1056/

<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8"> 
       <div class="hobbies"> 
        hobbies & interests 
       </div> 
       <div class="row padding-top group-icons"> 

        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"> 
         <a href="#" data-toggle="modal" data-target="#myModal"> 
          football 
         </a> 
        </div> 
        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"> 

         <a href="#" data-toggle="modal" data-target="#myModal"> 
          travel 
         </a> 

        </div> 
        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"> 
         <a href="#" data-toggle="modal" data-target="#myModal"> 
          history 
         </a> 
        </div> 
       </div> 
      </div> <!--popUp container--> 

<!-- Modal --> 

<div id="myModal" class="modal fade popUp" role="dialog"> 
     <div class="modal-dialog"> 

      <!-- Modal content--> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <h2 class="h2-style">My Hobbies</h2> 
        <hr class="hr_line"/> 
       </div> 
       <div class="modal-body"> 
        <div> 

         <!-- Nav tabs --> 
         <ul class="nav nav-tabs" role="tablist"> 
          <li role="presentation" class="active"><a href="#bartending" aria-controls="bartending" role="tab" 
                     data-toggle="tab">bartending</a></li> 
          <li role="presentation"><a href="#football" aria-controls="football" role="tab" 
                 data-toggle="tab">football</a> 
          </li> 
          <li role="presentation"><a href="#travel" aria-controls="travel" role="tab" 
                 data-toggle="tab">travel</a> 
          </li> 
          <li role="presentation"><a href="#history" aria-controls="history" role="tab" 
                 data-toggle="tab">history</a> 
          </li> 
         </ul> 

         <!-- Tab panes --> 
         <div class="tab-content" ng-controller="HobbiesCrtl"> 
          <div role="tabpanel" class="tab-pane fade" id="{{hobby.id}}" ng-repeat="hobby in hobbies"> 
           <div class="container padding-top"> 
            <div class="row"> 
             <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
              <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> 
               <img src="{{hobby.img}}" alt="" 
                style="width: 70%; margin: 0 auto; display: block"> 
              </div> 
              <div class="col-xs-12 col-sm-6 col-md-9 col-lg-9"> 
               {{hobby.description}} 
              </div> 
             </div> 
            </div> 
           </div> 
          </div> 
         </div> 

        </div> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       </div> 
      </div> 

     </div> 
    </div> 
    <!--popUp container--> 

<!--angular Ctrl--> 

myApp.controller('HobbiesCrtl', function($scope, $http){ 
     $scope.title = "my hobbies"; 
     $http.get(window.location + 'js/hobbies.json').success(function(data) { 
      $scope.hobbies = data; 
     }) 
    }); 

this is my json file: 

{ 
    "id": "football", 
    "img": "http://images.fastcompany.com/upload/adidas-jabulani-ball.jpg", 
    "description": " ball with the foot to score a goal. Unqualified, the word football is understood to refer to whichever form of is the most popular in the" 
    }, 

    { 
    "id": "travel", 
    "img": "http://thumbs.dreamstime.com/z/travelling-world-21448211.jpg", 
    "description": " ball with the foot to score a goal. Unqualified, the word football is understood to refer to whichever form of is the most popular in the" 
    }, 

Answer 1

只要你使用相同的控制器的視圖和模態窗口，所以他們共享相同的$範圍。

您可以創建一個像activeTab範圍變量，並設置在點擊：

<a href="#" data-toggle="modal" ng-click="activeTab == 'football'" data-target="#myModal"> 
          football 
         </a> 

在你的模式窗口，只需撥動活動類，如果範圍變量activeTab有neccessary值：

<li role="presentation" ng-class="{active: activeTab == 'football'}"><a href="#football" aria-controls="football" role="tab" 
                 data-toggle="tab">football</a>