Question

我有两个选项卡，一个带有主页，另一个带有菜单。在菜单选项卡中，我带有两个li。根据选定的li值，需要在表中显示值。

到目前为止，一切都进行得很好，但是我的目标是每3000秒使用$ interval调用一次$ scope.clicked函数，并在我单击主选项卡以及菜单选项卡的选定位置时停止$ interval（即，希望仅在菜单选项卡中选择li时执行$ interval。

Plunker

// Code goes here

var c = angular.module('myApp',[])
c.controller('myCtrl',function($scope,$interval,$rootScope){
 
  $scope.home = function(){
    $rootScope.selected = "";
    console.log("Home Selected");
  };
  
  $scope.menu = function(){
    $rootScope.selected = "";
    console.log("Menu Selected")
    
  } 
  
  $scope.clicked = function(selected){
    console.log(selected)
    $rootScope.selected = selected;
    $scope.showTable = true;
    $scope.menuItems=[{"id":1,"name": 'Item1',"price":25},
    {"id":1,"name": 'Item2',"price":25},
    {"id":1,"name": 'Item3',"price":25},
    {"id":1,"name": 'Item4',"price":25},
    {"id":1,"name": 'Item5',"price":25},
    {"id":1,"name": 'Item6',"price":25},
    {"id":1,"name": 'Item7',"price":25}]
  }
  
     $interval(function() {
        $scope.clicked($rootScope.selected);
    }, 1000);
})

<!DOCTYPE html>
<html>

  <head>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://code.angularjs.org/1.7.0/angular.min.js" data-require="angular.js@1.7.0" data-semver="1.7.0"></script>
    <link href="style.css" rel="stylesheet" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myApp" ng-controller="myCtrl">
    <h1>Hello Plunker!</h1>
    <ul class="nav nav-tabs">
      <li class="active"><a data-toggle="tab" href="#home" ng-click=home()>Home</a></li>
      <li><a data-toggle="tab" href="#menu1" ng-click=menu()>Menu</a></li>
    </ul>
    <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h3>HOME</h3> {{data}}
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="tab-pane fade">
      <li ng-click=clicked(1)>1</li>
      <li ng-click=clicked(2)>2</li>
      <li ng-click=clicked(3)>3</li>
        {{showTable}}
      <h3>Menu</h3>
       <table class="table" ng-if="showTable">
      <tr>
        <td>Menu Id</td>
        <td>Name</td>
        <td>Price</td>
      </tr>
      <tr ng-repeat="item in menuItems">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.price}}</td>
      </tr>
    </table>
    
    </div>
   </div>

  </body>

</html>

Answer 1

尝试this plunkr

您可以使用$interval取消$interval.cancel(timer);

c.controller('myCtrl',function($scope,$interval){
  var timer;
  $scope.home = function(){
    console.log("Home Selected");
    $interval.cancel(timer);
  };

  $scope.menu = function(){
    console.log("Menu Selected")
    $interval.cancel(timer);
  } 

  $scope.clicked = function(selected){
    console.log(selected)
    timer = $interval(function(){
      console.log('hi')
    },300);
    $scope.menuItems=[{"id":1,"name": 'Item1',"price":25},
    {"id":1,"name": 'Item2',"price":25},
    {"id":1,"name": 'Item3',"price":25},
    {"id":1,"name": 'Item4',"price":25},
    {"id":1,"name": 'Item5',"price":25},
    {"id":1,"name": 'Item6',"price":25},
    {"id":1,"name": 'Item7',"price":25}]
  }


})

停止$ interval在angularjs的制表符更改中

1 个答案: