如何跟踪angularJS中的数组索引？答案

【问题标题】：How to keep track of Array index in angularJS?如何跟踪angularJS中的数组索引？
【发布时间】：2015-09-17 09:17:23
【问题描述】：

Angularjs 非常新。所以我有一些 JSON 文件正在读入我的网页，其中包含汽车对象的数组。我想要做的是让我的“按钮”在按下时提醒我该按钮特定的数据。

ng-repeat 运行了 8 次，所以这是数组的长度，但是在 angularJs 中，我不确定每次 ng-repeat 在我的按钮函数中传递时如何基本存储数组索引。

这是我的 .html 的 sn-p：

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

有问题的部分位于底部，我有一个保留“按钮”

我遗漏了我的 JSON 文件，在那里可以正常工作。我只是不确定如何在 ng-repeat 执行其操作时跟踪数组索引。

这是角度：

    (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]);



    }());

目前在代码的顶部，我只是让它提醒对象 [0]，但我希望它特定于按下哪个按钮。任何帮助表示赞赏，谢谢。

【问题讨论】：

您可以在 HTML 中使用buttonPress($index) 来传递索引。
只是一个简短的评论：通过在 Stackoverflow 上快速搜索或咨询 AngularJS documentation，您可以轻松找到问题的答案。

标签： javascript jquery arrays json angularjs

【解决方案1】：

$index 指的是 ng-repeat 中的索引。因此，如果您想在单击按钮时将数组中的索引传递给函数，请将 buttonPress() 更改为 buttonPress($index)

您必须将控制器更改为以下内容：

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

【讨论】：

【解决方案2】：

要执行以下操作，您只需在ngRepeat 中传递当前数据。此外，如果您想要当前索引，ngRepeat 指令提供特殊属性，如 $index，它是一个迭代器。

$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);
  }

然后你可以这样调用你的函数：

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

【讨论】：

【解决方案3】：

首先，感谢你们两位的快速回复。这两个答案都有效。在阅读您的帖子之前，我也找到了另一种方法。

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

使用 (car.indexOf(cars)) 得到相同的结果

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

现在，当我单击“按钮”时，它会将数组索引发回给我，所以现在我应该可以使用该数据了。再次感谢两位的帮助。

【讨论】：