イオンスライド、それぞれがng-repeatとオーバーラップします

Question

私はイオン、html、角度、およびJavaスクリプトで真の初心者です。私はいくつかのJSONデータを取得し、それをng-repeatで表示するアプリケーションを持っています。

しかし、次のスライドに切り替えると、重なってしまいます。 JSONを5秒ごとにリフレッシュする$間隔があると、最初のスライドにもリセットされます。

ここ

HTML：

<ion-view title="home"> 
<ion-content ng-controller="temperatureCtrl">   
    <div ng-init="init()"></div> 
    <ion-slides options="options" slider="data.slider" > 
     <ion-slide-page ng-repeat="channel in channels"> 
      <div class="list"> 
      <h2><center>canal# {{channel.canal}}</center></h2>     
      <br/> 
      <center> 
       <button class="button button-stable" ng-click="switchChannel(channel, channel.canal)" ng-model="channel.status"> 
       {{channel.status}} 
       </button> 
      </center> 
      <div class="list"> 
       <label class="item item-input">    
       <input type="text" style="text-align:center;" placeholder="Channel name" ng-model="channel.name" ng-focus="stopRefresh()" ng-blur="restartRefresh()"> 
       </label> 
      </div> 
      <h4><center> 
      <span class="Ainput" ><h3>{{channel.temperature}}&#186;C</h3></span> 
      </center></h4> 
      <h3><center>Setpoint= {{channel.setPoint}}</center></h3><br> 
      <div class="item range range-positive">     
       <i class="icon ion-minus-round"></i>     
       <input type="range" name="setpoint" min="5" max="30" step="0.5" value="33" ng-model="channel.setPoint" ng-focus="stopRefresh()" ng-blur="restartRefresh()"> 
       <i class="icon ion-plus-round"></i> 
      </div> 
      <centrer> 
       <button class="button button-dark button-block padding " ng-click="channelsClk(channel, channel.setPoint)">ok</button> 
      </centrer> 
      <h3> 
       <span class="permRun">{{channel.permission}}</span> 
      </h3> 
      <h3> 
       <span class="AoutputChannel">{{channel.percentOut}}%</span> 
      </h3> 
     </ion-slide-page>     
    </ion-slides>   
</ion-content> 

とのcontroler：

main.controller("temperatureCtrl", ["$scope", "$interval", "ArduinoService", function($scope, $interval, service) { 
    var autoRefresh; 
    $scope.channels = []; 

    $scope.options = { 
    loop: false, 
    effect: 'fade', 
    speed: 500, 
    } 
    $scope.data = {}; 
    $scope.$watch('data.slider', function(nv, ov) { 
    $scope.slider = $scope.data.slider; 
    }) 

    function startRefresh(){ 
    autoRefresh = $interval(function() { 
    updateAjax(); 
    }, 5000); 
    } 


    function updateAjax() { 
    service.getChannels(function(err, result) {//get json data 
     if (err) { 
     return alert(err); 
     } 
     // puis les mets dans le scope 
     $scope.channels = result.channels; 
    }) 
    }; 

    $scope.init = function() { //on load page first get data 
    updateAjax(); 
    startRefresh() 
    } 


    $scope.switchChannel = function($scope, channel) { // change name function 
    var switchCh = {canal : $scope.canal, status : $scope.status} 
    service.switchChannel(switchCh, function() { 
    }); 
    updateAjax(); 
    }; 

    $scope.channelsClk = function($scope, channel) { 
     var chanObj = {setPoint : $scope.setPoint, name : $scope.name, canal :   $scope.canal 
     }; 
     service.putChannels(chanObj, function() { 
    }); 
    } 

$scope.stopRefresh = function() { //ng-mousedown 
    $interval.cancel(autoRefresh); 
    }; 

    $scope.restartRefresh = function() { 
    startRefresh(); 
    }; 

$scope.$on('$destroy', function() { 
    // Make sure that the interval is destroyed too 
    $scope.stopRefresh(); 
    }); 


}]); 

Answer 1

削除オプションのフェード問題を解決します。

$scope.options = { 
    loop: false, 
//effect: 'fade', /* <-- */ 
speed: 500, 
}