Nested ng repeat failure in angular js

Question

Try to do a nest ng-repeat, parent ng-repeat works but not for its child 1.Created object and insert data when app init 2.display data by calling ng-repeat

angular.module('lipapp', []).controller('lipapp_Module_Control', function ($scope, $http, $window) {
        $scope.CompaignBasket = []; 
        $scope.CompaignBasketTotal = 0;
        $scope.CompaignBasketCauseTotal = [];
        //Sample Data Section, Real data plz go to $scope.UpdateCompaign function
        $scope.InitialCompaignBasket = function () {

            $scope.CompaignBasket = [];
            var causeAmount = [];
            var causeitem = 0;

            var donorDetail = {}; 
            donorDetail.Date = '2/14/13';
            donorDetail.Donor = 'George Smith';
            donorDetail.City = 'Los Angelos';
            donorDetail.State = 'CA';
            donorDetail.Total = 400;

            causeAmount = [];  //forloop Dynamic Insert!
           causeAmount.push(10);
           causeAmount.push(0);  
           causeAmount.push(500);
           causeAmount.push(0);
           causeAmount.push(1000);
           causeAmount.push(0);
          //causeitem = 0;causeAmount.push(causeitem); or I should use this format?

            donorDetail.DonorCauseAmount = causeAmount;
            $scope.CompaignBasketTotal += donorDetail.Total;
            $scope.CompaignBasket.push(donorDetail);

            console.log( $scope.CompaignBasket);
            ...
          }

All the result display correctly but the item.donorCauseAmount has throw errors

             <tr ng-repeat="item in CompaignBasket">
                    <td>{{item.Date}}</td>
                    <td>{{item.Donor}}</td>
                    <td>{{item.City}}</td>
                    <td>{{item.State}}</td> 
                    <td ng-repeat="cause_item in item.DonorCauseAmount">{{cause_item}} </td>
                    <td>${{item.Total|number :0}}</td>
                </tr>

Also for when I try to calculate the total for different CauseItem in the same col in script there is also a repeater error

         for(var i=0; i< $scope.CompaignBasket.length; i++)
            { 

                if (i == 0)
                {
                    $scope.CauseTotalAmount = $scope.CompaignBasket[i].DonorCauseAmount;
                    console.log($scope.CauseTotalAmount);
                }
                else {
                    for (var j = 0; j < $scope.CauseTotalAmount.length; j++) {
                        //  $scope.CauseTotalAmount[j] += $scope.CompaignBasket[i].DonorCauseAmount[j];
                        console.log('total '+ $scope.CompaignBasket[i].DonorCauseAmount[j]); //Error show up by this!!!
                    }
                }
                console.log($scope.CauseTotalAmount);
            }

How can I solve it?

but the item.donorCauseAmount has throw errors What errors? — PSL
– PSL, Commented Oct 28, 2014 at 18:24
possible duplicate of Angular ng-repeat Error "Duplicates in a repeater are not allowed." — PSL
– PSL, Commented Oct 28, 2014 at 18:32

Olivercodes · Accepted Answer · 2014-10-28 18:28:59Z

6

You need to use a track by index when you have duplicate values within the array.

<td ng-repeat="cause_item in item.DonorCauseAmount track by $index">{{cause_item}} </td>

answered Oct 28, 2014 at 18:28

Olivercodes

1,0486 silver badges17 bronze badges

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

1 Comment

dfsq Over a year ago

Exactly: ng-repeat="cause_item in item.DonorCauseAmount track by $index"

Collectives™ on Stack Overflow

Nested ng repeat failure in angular js

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related