2016-07-11 8 views
0

私はイオンアプリケーションを構築しています。私のテンプレートには、特定の間隔(例えば2秒ごと)で1つずつioniconsを設定したいリストがあります。私のコントローラで定義したイオンコンセントのリスト。リスト内の特定の間隔でイオンを設定するAngularjs

マイコントローラ:

.controller('DashCtrl', function($scope, $timeout) { 
    $scope.ionicon_class_list1=['ion-xbox','ion-ribbon-a', 'ion-trophy', 'ion-ios-football','ion-android-bicycle']; 
    $scope.ionicon_class_list2=['ion-wrench','ion-scissors', 'ion-gear-b', 'ion-ios-alarm-outline','ion-ios-flask']; 
    $scope.ionicon_class_list3=['ion-edit','ion-clipboard', 'ion-calculator', 'ion-printer','ion-android-calendar']; 

    $scope.current_symbol_for_list1 = ''; 


    for(symbol in $scope.ionicon_class_list1){ 

     /* logic to select symbol at a specific time interval */ 
    } 

    $scope.setSymbol = function(symbol){ 

    $scope.current_symbol_for_list1=symbol 

    } 

}) 

マイHTML:

<ion-view view-title="Dashboard"> 
    <ion-content class="padding"> 

    <div class="row"> 

     <div class="col col1" align="center"> 

      <i class="icon {{current_symbol_for_list1}}"></i> 

     </div> 

     <div class="col col2" align="center"> 
     <ion-list> 
      <ion-item ng-repeat="symbol in ionicon_class_list2"> 
      <i class="icon {{symbol}}"></i> 
      </ion-item> 
     </ion-list> 
     </div> 

     <div class="col col3" align="center"> 
     <ion-list> 
      <ion-item ng-repeat="symbol in ionicon_class_list3"> 
      <i class="icon {{symbol}}"></i> 
      </ion-item> 
     </ion-list> 
     </div> 

    </div> 

    <div align="center"> 
     <button class="button button-dark">Start</button> 
    </div> 


    </ion-content> 
</ion-view> 

私はそれをどのように行うことができますか? Plunkr:http://plnkr.co/edit/eYKQPM?p=preview

:私は、「開始」をクリックすると、単一のIoniconは2秒間の3つの列(最初に列が空である)のそれぞれに表示され、それが変更されます。コントローラで

答えて

0

私が追加:HTMLで

var i = 0, length = $scope.ionicon_class_list1.length; 
    $scope.iterator = function(){ 

    console.log($scope.ionicon_class_list1[i]); 
    $scope.current_symbol_for_list1=$scope.ionicon_class_list1[i] 


    if(++i<length) { 

     $timeout($scope.iterator, 3000) 

    } 

    } 
}) 

を:[スタート]ボタンを

ng-click="iterator()" 
関連する問題