CODEWITHSUNDEEP
arraysangularjs
DTX
DTX

Reputation: 182

How to iterate through an array in Angular?

I'm new to Angular. What I want to do is display data from an array of objects on the page and provide buttons for the user to move on the next/previous array item.

Let's say our array is:

var destinations = [
    {
      name: "Rome",
      weather: "sunny",
      price: "$2999"
    },
    {
      name: "Paris",
      weather: "cloudy",
      price: "$4500"
    }
];

If I want to display it in HTML, I can write {{destinations[1].name}} and it works, but how do I make this dynamic? I tried defining an i variable in the controller and inserting [i] into the HTML directive, but that doesn't work.

How can I make this work?

Upvotes: 2

Views: 3256

Answers (4)

doug65536
doug65536

Reputation: 6771

Use a member of the scope to represent the current item.

HTML

<div data-ng-app="exampleModule" data-ng-controller="exampleController">
  <div>
    <button data-ng-click="changeDestination(1)">
      Next
    </button>
    <button data-ng-click="changeDestination(-1)">
      Prev
    </button>
  </div>
  <div class="dest-container">
    <div class="dest-field dest-price-field">  
      <div class="dest-title">Price:</div>
      <div class="dest-content">{{ current.price }}</div>
    </div>
    <div class="dest-field dest-name-field">  
      <div class="dest-title">Name:</div>
      <div class="dest-content">{{ current.name }}</div>
    </div>

    <div class="dest-field dest-weather-field">  
      <div class="dest-title">Weather:</div>
      <div class="dest-content">{{ current.weather }}</div>
    </div>
  </div>
</div>

This will create a one display, displaying $scope.current.

I have created a minimal complete example with your destination array.

Javascript

(function(angular) {
  "use strict";

  var exampleModule = angular.module('exampleModule', []);
  exampleModule.controller('exampleController', ['$scope', function($scope) {
    $scope.destinations = [
      {
        name: "Rome",
        weather: "sunny",
        price: "$2999"
      },
      {
        name: "Paris",
        weather: "cloudy",
        price: "$4500"
      }
    ];

    $scope.currentItem = 0;
    $scope.current = $scope.destinations[$scope.currentItem];

    $scope.changeDestination = function(diff) {
      $scope.currentItem += diff;

      if ($scope.destinations.length) {
        while ($scope.currentItem >= $scope.destinations.length)
          $scope.currentItem -= $scope.destinations.length;
        while ($scope.currentItem < 0)
          $scope.currentItem += $scope.destinations.length;
      } else {
        $scope.currentItem = 0;
      }
      $scope.current = $scope.destinations[$scope.currentItem];
    };
  }]);
}(angular));

The page loads AngularJS 1.4.8 before running the javascript code.

The same thing can be used for a range of items, you can slice the array and set an array in $scope.current then use ng-repeat to show the items to implement pagination.

Upvotes: 1

user6334865
user6334865

Reputation: 

 <div ng-repeat="value in destinations">
       <p>
       <span>{{value.name}}</span>
       <span>{{value.weather}}</span>
       <span>{{value.price}}</span>
       </p>
 </div>

Upvotes: 1

jeremy-denis
jeremy-denis

Reputation: 6878

in you html use ng-repeat

<div ng-repeat="destination in destinations">{{destination}}</div>

or in a controller you can use

angular.forEach(destinations,function(value) {
//here value is equal to one elment of your array
alert(value);
);

Upvotes: 2

Rune J&#248;rgensen
Rune J&#248;rgensen

Reputation: 1

<div ng-repeat="dest in destinations">
{{name}}
</div>

Would be one way, remember destinations must be part of the scope of your controller

Upvotes: -1

Related Questions