CODEWITHSUNDEEP
javascriptangularjs
Rudziankoŭ
Rudziankoŭ

Reputation: 11251

AngularJS: Iterate over array by clicking button

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?

Upvotes: 2

Views: 1154

Answers (3)

Abdul Mateen Mohammed
Abdul Mateen Mohammed

Reputation: 1894

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>

Upvotes: 1

Olivier Boiss&#233;
Olivier Boiss&#233;

Reputation: 18113

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>

Upvotes: 2

Manu
Manu

Reputation: 10944

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>

Upvotes: 1

Related Questions