Im, использующий ng-repeat для циклов через массив объектов, для которых я хотел бы печатать нумерованные заголовки.

Например:

контроллер

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 (или что-то еще) для достижения своего Ожидаемый результат?

источник

2017-02-11 yevg

Это происходит потому, что ожидаемая о/р не идет с рабочим принципала из '$ index' .index напечатает фактический индекс элемента в массиве. –

Вы можете сделать что-то вроде ниже, сделав orderBy из make опоры. Это не жесткое решение. Далее вы можете использовать пользовательский filter создать новую коллекцию сгруппированного объекта по свойству make.

Markup

<div ng-repeat="car in cars | orderBy: 'make'"> 
    <h1 ng-if="cars[$index].make != cars[$index-1].make"> 
     {{car.make}}: 
    </h1> 
    <div><b>{{$index + 1}})</b> {{car.model}}</div> 
</div>

Demo Here

источник

2017-02-11 04:22:05

Одно простое решение создать отфильтрованный массив, который будет возвращать только согласование elements.Then вы можете использовать $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>

источник

2017-02-11 04:34:40

Demo link здесь.

ВИД:

<div ng-app ng-controller="Main"> 
    <div ng-repeat="carPerMake in carsToFilter() | filter:filterMake"> 
    <b>{{carPerMake.make}}:</b> 
    <div ng-repeat="car in cars | filter:{make: carPerMake.make}"> {{$index}} - {{car.model}}</div> 
    <br> 
    </div> 
</div>

Контроллер:

function Main($scope) { 
    $scope.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' 
    }, ]; 

    var makeArr = []; 

    $scope.carsToFilter = function() { 
    makeArr = []; 
    return $scope.cars; 
    } 

    $scope.filterMake = function(car) { 
    var newMake = makeArr.indexOf(car.make) == -1; 
    if (newMake) { 
     makeArr.push(car.make); 
    } 
    return newMake; 
    } 
}

Выход:

брод: 0 - мустанг 1 - слитый

BWM: 0 - х5

Хонда: 0 - гражданское 1 - согласие 2 - CRV

Тойота: 0 - Камри

источник

2017-02-11 06:53:56 user7348450

Угловое ng-repeat - уникальный $ index для нескольких циклов

ответ

ВИД:

Контроллер:

Выход:

Угловое ng-repeat - уникальный $ index для нескольких циклов

ответ

ВИД:

Контроллер:

Выход:

Смежные вопросы