gpt4 book ai didi

javascript - Angular ng-repeat - 跨多个循环的唯一 $index

转载 作者:行者123 更新时间:2023-12-03 05:02:15 25 4
gpt4 key购买 nike

我使用 ng-repeat 循环遍历我想要打印编号标题的对象数组。

例如:

Controller

var cars = [
{make:'ford',model:'mustang'},
{make:'ford',model:'fusion'},
{make:'bwm',model:'x5'},
{make:'honda',model:'civic'},
{make:'honda',model:'accord'},
{make:'toyota',model:'camry'},
{make:'honda',model:'crv'},
];

查看

<div ng-repeat="car in cars" ng-show="car.make=='ford'">
<h1>Fords:</h1>
<div><b>{{$index}})</b> {{car.model}}</div>
</div>

<div ng-repeat="car in cars" ng-show="car.make=='honda'">
<h1>Hondas:</h1>
<div><b>{{$index}})</b> {{car.model}}</div>
</div>

预期输出

Fords:
0) mustang
1) fusion

Hondas:
0) civic
1) accord
2) crv

实际输出

Fords:
0) mustang
1) fusion

Hondas:
3) civic
4) accord
6) crv

换句话说,在每个循环中 $index 维护对源数组的引用。我认为这是有道理的,但我认为 $index 的目的是计算给定循环范围内的迭代次数?

如何使用 $index (或其他东西)来实现我的预期输出

最佳答案

一个简单的解决方案是创建一个过滤数组,该数组仅返回匹配的元素。然后您可以正确使用 $index 来打印订购号。

<body ng-app="textInputExample">
<script>
angular.module('textInputExample', [])
.controller('ExampleController', ['$scope', function($scope) {
var cars = [{
make: 'ford',
model: 'mustang'
}, {
make: 'ford',
model: 'fusion'
}, {
make: 'bwm',
model: 'x5'
}, {
make: 'honda',
model: 'civic'
}, {
make: 'honda',
model: 'accord'
}, {
make: 'toyota',
model: 'camry'
}, {
make: 'honda',
model: 'crv'
}, ];
$scope.cars = cars;
$scope.filteredcars = function(make){
return $scope.cars.filter(function(e) { return e.make === make });
};

}]);
</script>
<div ng-controller="ExampleController">
<div ng-repeat="car in filteredcars('honda')">
<h1>Hondas:</h1>
<div><b>{{$index}})</b> {{car.model}}</div>
</div>
</div>
</body>

关于javascript - Angular ng-repeat - 跨多个循环的唯一 $index,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42172167/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com