Désolé pour le vidage, question, je suis nouveau sur AngularJS et sur JavaScript. Je voudrais parcourir la collection en cliquant sur le bouton.

<body ng-init="customers = [
{'name':'John', 'city':'Doe'},
{'name':'Anna', 'city':'Smith'},
{'name':'Peter', 'city':'Jones'}
]">


<div class="container" ng-app="myApp" ng-controller="myCtrl" >
    <div class="span12">
        <h1>{{name}}</h1>
        <br/>
        <p>{{city}}</p>


        <button type="button" name="button" value="Next" ng-click="makeIterator($scope.customers)"></button>
    </div>
</div>

Donc, après avoir cliqué sur le bouton Next, je voudrais voir la prochaine itération des clients affichée. Comment pourrais-je y arriver?

2
Rudziankoŭ 8 août 2016 à 12:47

3 réponses

Meilleure réponse

Vous pouvez stocker un index et l'incrémenter en cliquant sur le bouton

<body ng-app="myApp">
<div class="container" ng-controller="myCtrl" >
   <div class="span12">
      <h1>{{customers[currentCustomerIdx].name}}</h1>
      <br/>
      <p>{{customers[currentCustomerIdx].city}}</p>


  <button type="button" name="button" value="Next" 
          ng-click="index = (index + 1) % customers.length"></button>
</div>
<script>
 angular.module('myApp', [])
 .controller('myCtrl', function ($scope) {
    $scope.customers = [
     {'name':'John', 'city':'Doe'},
     {'name':'Anna', 'city':'Smith'},
     {'name':'Peter', 'city':'Jones'}];
    $scope.currentCustomerIdx = 0;
  });
</script> 
2
Olivier Boissé 8 août 2016 à 10:26

Vous pouvez stocker un index sur la portée du contrôleur pour parcourir le tableau des clients en liant un événement de clic sur un bouton et utiliser l'index pour récupérer un client du tableau des clients.

angular
  .module('demo', [])
  .controller('DefaultController', DefaultController);
  
  function DefaultController() {
    var vm = this;
    vm.index = 0;
    vm.customers = customers;
    vm.customer = vm.customers[vm.index];
    vm.nextCustomer = nextCustomer;
    
    function nextCustomer() {
      vm.index = vm.index + 1;
      if (vm.index === vm.customers.length) {
      	vm.index = 0;
      }
      
    	vm.customer = vm.customers[vm.index];
    }
  }
  
  var customers = [
  { name: 'Name 1', city: 'City 1' },
  { name: 'Name 2', city: 'City 2' },
  { name: 'Name 3', city: 'City 3' },
  ];
  
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
  <div ng-controller="DefaultController as ctrl">
    <div>
      <span>Customer: </span>{{ctrl.customer.name}}
    </div>
    
    <div>
      <span>City: </span>{{ctrl.customer.city}}
    </div>
    
    <button type="button" ng-click="ctrl.nextCustomer()">Next</button>
  </div>
</div>
1
Abdul Mateen Mohammed 8 août 2016 à 10:50

PFB l'approche pour le faire:

<body>

<div class="container" ng-app="myApp" ng-controller="myCtrl">
<div class="span12">
    <h1>{{customers[counter].name}}</h1>
    <br/>
    <p>{{customers[counter].city}}</p>


    <button type="button" name="button" value="Next" ng-click="iterate();">NEXT</button>
</div>
</div>
    <script>
var app = angular.module("myApp", []);
app.controller('myCtrl', function($scope) {
$scope.customers = [
{'name':'John', 'city':'Doe'},
{'name':'Anna', 'city':'Smith'},
{'name':'Peter', 'city':'Jones'}
]
$scope.counter=0; 
$scope.maxCount = $scope.customers.length - 1;
$scope.iterate = function(){
if($scope.counter == $scope.maxCount)
{
$scope.counter=0;
}
else{
$scope.counter++;
}
}
});
</script>
</body>
1
Vishal Gulati 8 août 2016 à 10:12