How to keep track of Array index in angularJS?

Question

Very new to Angularjs. So I have some JSON files that I am reading into my webpage that contain and array of objects that are cars. What I am trying to do is have my "button" when pressed alert me to the data specific to that button.

The ng-repeat is running 8 times so that is the length of the array, but in angularJs i'm not sure how to basically store the array index for each time the ng-repeat passes in my button function.

This is my a snippet of my .html:

    <div class="carTable table-responsive text-center" ng-controller="ButtonController" >
    <table class="table specTable">
        <thead>
            <tr>
                <th>Make</th>
                <th>Model</th>
                <th>Year</th>
                <th>Color</th>
                <th>Milage</th>
                <th>Doors</th>
                <th class="reserve">Horsepower</th>
                <th>Price</th>
                <th class="reserve"></th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="cars in car | orderBy:'year'">
                <td>{{cars.year}}</td>
                <td>{{cars.model}}</td>
                <td>{{cars.make}}</td>
                <td>{{cars.color}}</td>
                <td>{{cars.mileage | number}}</td>
                <td>{{cars.doors}}</td>
                <td>{{cars.horsepower}}</td>
                <td>{{cars.price | number}}</td>
                <td><div class="panel panel-default"><a  href="" ng-click="buttonPress()">Reserve</a></div></td>
            </tr>
        </tbody>
    </table>
</div>

The portion in question is at the bottom where I have a Reserve "button"

I'm leaving out my JSON files, works properly there. I'm just not sure how to keep track of the array index as the ng-repeat does its thing.

Here is the angular:

    (function(){

var app = angular.module("myReserveApp", []);

app.controller("ButtonController", ["$scope", "$window", function($scope, $window){
    $scope.buttonPress = function(){
        $window.alert(JSON.stringify($scope.car[0]));
    }

}]);

    var MainController = function($scope, $http, $window){

var onGatherBoatData = function(response){

    $scope.boat = response.data;

};

var onError = function(reason){

    $scope.error = "Could not fetch Boat Data";

};

var onGatherCarData = function(response){

    $scope.car = response.data;

};

var onError = function(reason){

    $scope.error = "Could not fetch Car Data";

};

var onGatherTruckData = function(response){

    $scope.truck = response.data;

};

var onError = function(reason){

    $scope.error = "Could not fetch Truck Data";

};



$scope.message = "Hello, Angular Here!";

    };

app.controller("MainController", ["$scope", "$http", "$window", MainController]);



    }());

Currently in the top portion of the code I just have it alerting object[0] but I want it to be specific to which button is pressed. Any help is appreciated, thank you.

You can do buttonPress($index) in your HTML to pass in the index. — potatopeelings
– potatopeelings, Commented Sep 17, 2015 at 9:23
Just a quick remark: You could have easily found the answer to your question by doing a quick search here on Stackoverflow or consulting the AngularJS documentation. — muenchdo
– muenchdo, Commented Sep 17, 2015 at 9:36

Tyler Harden · Accepted Answer · 2015-09-17 09:23:38Z

2

$index refers to the index in ng-repeat. So if you want to pass your function the index in array on the button click, change buttonPress() to buttonPress($index)

you'll have to change your controller to something like the following:

$scope.buttonPress = function(index){
    $window.alert(JSON.stringify($scope.car[index]));
}

answered Sep 17, 2015 at 9:23

Tyler Harden

2792 silver badges13 bronze badges

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

Comments

Paul Boutes · Accepted Answer · 2015-09-17 09:26:21Z

1

To do the following, you can just pass the current data in the ngRepeat. Moreover,if you want the current index, the ngRepeat directive provide specials properties, as the $index, which is an iterator.

$scope.buttonPress = function(car, index){
      //Retrieve current data of the ngRepeat loop
      console.log(car);

      //Current index of your data into the array
      console.log(index);
  }

Then you can call your function like this :

<a  href="" ng-click="buttonPress(cars, $index)">Reserve</a>

answered Sep 17, 2015 at 9:26

Paul Boutes

3,3152 gold badges21 silver badges22 bronze badges

Comments

Dom · Accepted Answer · 2015-09-17 17:39:00Z

0

First, thank you both for the quick responses. Both of these answers work. I found another way to do it as well before reading your posts.

    <div class="panel panel-default">
    <a  href="" ng-click="buttonPress(car.indexOf(cars))">Reserve:{{car.indexOf(cars)}}</a>
    </div>

Using (car.indexOf(cars)) gives me the same result

    $scope.buttonPress = function(index){
        $window.alert(JSON.stringify(index));   
    }

Now when I click on the "button" it sends me back the array index, so now I should be able to play with that data. Thank you again both, for your help.

answered Sep 17, 2015 at 17:39

Dom

34 bronze badges

Collectives™ on Stack Overflow

How to keep track of Array index in angularJS?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related