AngularJS: Iterate over array by clicking button

Question

Sorry for dump, question, I am new to AngularJS and to JavaScript. I would like to iterate over collection by clicking the button.

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

So after clicking Next button I would like to see next iteration of customers displayed. How could I make it?

Just create a variable currentUser and update its value to next variable. Also its a bad practice to put entire JSON on view — Rajesh Dixit
– Rajesh Dixit, Commented Aug 8, 2016 at 9:49

Olivier Boissé · Accepted Answer · 2016-08-08 10:26:22Z

2

You can store an index and increment it when clicking on the button

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

edited Aug 8, 2016 at 10:26

answered Aug 8, 2016 at 9:54

Olivier Boissé

18.5k7 gold badges54 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Rudziankoŭ Over a year ago

Thanks for answer! I don't know way but it doesn't work for me

Olivier Boissé Over a year ago

do you have an error ? it doesn't display the customer ?

Shams Over a year ago

it should be like this ng-click="currentCustomerIdx = (currentCustomerIdx + 1) % customers.length"

Vishal · Accepted Answer · 2016-08-08 10:12:04Z

PFB the approach to do it:

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

Abdul Mateen Mohammed · Accepted Answer · 2016-08-08 10:50:17Z

You can store an index on the controller's scope to iterate over the customers array by binding a click event on a button and use the index to retrieve a customer from the customers array.

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>

Collectives™ on Stack Overflow

AngularJS: Iterate over array by clicking button

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related