Question

我正在使用angularjs和javascript开发一个应用程序。在我的应用程序中，页面包含2个选项卡：名为“aboutme”和“portfolio”。两者都含有离子载玻片。幻灯片仅在'aboutme'选项卡中工作，而不在'portfolio'中。这是我的代码：

<div class="tab-inner-disc">
                        <div class="block">
                            <div class="br-menu-main">
                                <div class="br-block {{clickOn}}">
                                    <ul>
                                        <li>
                                            <button ng-class="{'conn1': clickOn == 'conn1'}" class="disc_tab" ng-click="showCon('conn1')">About me     </button>
                                        </li>

                                        <li>
                                            <button ng-class="{'conn2': clickOn == 'conn2'}" class="disc_tab " ng-click="showCon('conn2')">   Portfolio    </button>
                                        </li>

                                    </ul>

                                </div>
                            </div>


                            <div ng-show="clickOn=='conn1'">
                                     <ion-slides  options="options" slider="data.slider">
                                             <ion-slide-page>
                                                    <img src="img/add/2.png">
                                              </ion-slide-page>
                                              <ion-slide-page>
                                                    <img src="img/add/3.png">
                                              </ion-slide-page>
                                              <ion-slide-page>
                                                    <img src="img/add/6.png">
                                              </ion-slide-page>
                                            </ion-slides>
                            </div>

                            <div ng-show="clickOn=='conn2'">
                               <ion-slides  options="options" slider="data.slider">
                                      <ion-slide-page>
                                             <img src="img/add/2.png">
                                      </ion-slide-page>
                                      <ion-slide-page>
                                             <img src="img/add/3.png">
                                      </ion-slide-page>
                                      <ion-slide-page>
                                             <img src="img/add/6.png">
                                      </ion-slide-page>
                               </ion-slides>

                            </div>
                        </div>
            </div>


*my controller*


  $scope.showCon = function(con) {
        $scope.clickOn = con;
    }

    $scope.showCon('conn1');

    $scope.options = {
        loop: false,
        effect: 'slide',
        speed: 500,
        pagination:false,
    }

Answer 1

我的控制器

 $scope.showCon = function(con) {
        $scope.clickOn = con;
    }

   $scope.clickOn = conn1; //add this code will be work
   // $scope.showCon('conn1');

    $scope.options = {
        loop: false,
        effect: 'slide',
        speed: 500,
        pagination:false,
    }

离子滑板不起作用

1 个答案: