2015-08-28 63 views
2

我有一個帶有列表的菜單的滑動菜單,每個列表都有兩個項目的輪播。 我希望在關閉菜單並重新打開菜單後顯示第一個輪播項目,然後單擊菜單頁中顯示的但在列表外部顯示的按鈕。onsen-ui:將活動輪播項目設置爲0(帶有輪播列表的滑動菜單的菜單)

這是我有:

<ons-template id="menu.html"> 
     <ons-page> 
      <span style = "text-align:center;width:30dp;margin:25%;">Presentations</span> 
      <ons-list id ="list" style="padding:0px;" ng-controller="ItemController"> 

      <ons-list-item ng-repeat="item in local" style="padding:0;"> 
       <ons-carousel swipeable auto-scroll auto-refresh initial-index="0" style="height: 100%;width: 100%; position: absolute;"> 
       <ons-carousel-item style="padding:0;"> 
        <ons-button modifier = "quiet" ng-click="menu.close();customSetMainPage(item.id);"> 
        {{item.name}} 
        </ons-button> 
       </ons-carousel-item> 
       <ons-carousel-item style ="text-align: center;"> 
        <ons-button ng-click="deletepresentation(item.id);local.splice($index, 1);" > 
         Remove 
         <ons-icon icon="ion-trash-a"/> 
        </ons-button> 
       </ons-carousel-item> 
       </ons-carousel> 
      </ons-list-item> 
      </ons-list> 

      <p> 
       <ons-button modifier = "small" style="margin-left: 25%;" id = "add" 
        onclick=" 
        addPresentation(); 
        menu.closeMenu(); 
        if (runtime.diaginit == false) { 
        runtime.diaginit=true; 
        ons.createDialog('dialog.html').then(function(dialog) {dialog.show();});} 
        else {dialog.show();} 
        " 
        > 
        new presentation 
       </ons-button> 
      </p> 
     </ons-page> 
     </ons-template> 

編輯:

我想繼續這樣。 此行angular.element(document.getElementById('list')).scope().itemToDefault();塊我與此錯誤顯示

未定義的應用程序是不是(評估 '$ scope.carousel [指數]。首先()')

ons.ready(function() { 
      menu.setMainPage('first.html'); 
      menu.on('postclose', function() { 
      ons.compile(document.getElementById("carousel")); 

      }); 
      menu.on('preclose', function() { 
       angular.element(document.getElementById('list')).scope().itemToDefault(); 

      }); 
     }); 


var application = angular.module('app', ['onsen']); 
application.controller('ItemController',function($scope){ 
    $scope.local = []; 
    $scope.itemToDefault = function(){ 
      var c = $scope.carousel; 
      for (var index in $scope.carousel) { 
       if($scope.carousel.hasOwnProperty(index)) { 
        $scope.carousel[index].first(); 
       } 
      } 
     }; 

    }); 

回答

1

您需要的功能以「命名」您的傳送帶以便能夠訪問它們:<ons-carousel var="carousel.{{$index}}" ...>。 然後,你需要這樣的事情每個轉盤恢復到它的第一個指標:

for (var index in $scope.carousel) { 
    if($scope.carousel.hasOwnProperty(index)) { 
    $scope.carousel[index].first(); 
    } 
} 

只要打電話,每次你需要的。在菜單中的按鈕動作之前或之後,以及滑動菜單(mySlidingMenu.on('postclose', restore_all_carousels))的postclosepreopen事件之前或之後。

希望它有幫助!

+0

嘿弗檢查我的更新請。 – Anima

+1

@Amina您使用的是哪個版本的Onsen UI?嘗試'setActiveCarouselItemIndex(0)'而不是'first()',我不確定這個方法是否是新的。 –