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

只要您为视图和模态窗口使用相同的控制器，它们就会共享相同的$ scope。

您可以像activeTab一样创建范围变量，并在点击时设置：

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

在模态窗口中，如果范围变量activeTab具有必要值，则只切换活动类：

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

单击链接并打开相应的选项卡

1 个答案: