Question

我是离子，html，角度和java脚本的真正新手。我有一个应用程序可以获取一些JSON数据并使用ng-repeat显示它。

但是当我试图切换到下一张幻灯片时，它会重叠。我有一个$ interval，每5秒刷新一次JSON，它也会重置为第一张幻灯片。

这里是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>

和控制器：

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,
}

离子载玻片，每个都与ng-repeat重叠

1 个答案: