keeping track of nested ng-repeat index's

Question

So I have a nested ng-repeat like so:

<div ng-repeat="data in flow" ng-init="$flowIndex = $index">

    Index: {{ $index }}
    <div ng-click="flow.splice($index, 1)">Delete me</div>

    <div ng-repeat="inside_data in flow[$flowIndex]">
        Inside index: {{ $index }}
    </div>

</div>

I want to be able to delete index in my $flowIndex. However if I have something like this:

And I delete index 2. If I go and delete index 3, it isn't found because ng-init variable still things its at index 3 but really its not at index 2.

Does anyone know a work around?

When you delete index 2 using the `ng-click`, it should trigger a digest cycle which will re-execute the `ng-repeat` and cause the item that was previously index 3 to have index 2. Are you doing something outside of AngularJS so that the digest doesn't occur? — Jack A., Nov 28 '16 at 19:51

lenilsondc · Accepted Answer · 2016-11-28T19:50:01.437

3

You can get rid of $flowIndex, it's not necessary, you can use $parent.$index instead, when you are using ngRepeat it creates a child scope and $index is part of that scope. Also consider moving your deleting logic into the controller.

Controller:

$scope.delete = function ($index) {
    $scope.flow.splice($index, 1);
};

Html:

<div ng-repeat="data in flow">

    Index: {{ $index }}
    <div ng-click="delete($index)">Delete me</div>

    <div ng-repeat="inside_data in flow[$index]">
        Inside index: {{ $parent.$index }} -> {{ $index }}
    </div>
</div>

edited Nov 28 '16 at 19:50

answered Nov 28 '16 at 19:33

lenilsondc

9,590
2
25
40

This is great, however I have found out that `ng-repeat` should still be `$index` and not `$parent.$index` – bryan Nov 28 '16 at 19:38
@bryan you're right, it belongs to the parent scope at that point. Therefore, it's not necessary to user `$parent` because it's already on `$parent`. I've updated my answer. – lenilsondc Nov 28 '16 at 19:51

score 0 · Answer 2 · edited May 23 '17 at 10:33

0

I believe you can get the parent index like so:

$parent.$index

As mentioned in this answer: passing 2 $index values within nested ng-repeat

That way you don't have to worry about your variable being out of sync with your current state.

edited May 23 '17 at 10:33

Community

1
1

answered Nov 28 '16 at 19:33

Pop-A-Stash

6,572
5
28
54

score 0 · Answer 3 · answered Nov 28 '16 at 19:51

I just tested your similar code with some dummy data strings and the delete appears to work. I made some updates to your code to better analyze it.

// Code goes here

var myApp = angular.module('myApp',[]);

myApp.controller('MyController', ['$scope', function($scope) {
  $scope.flow = [
    ["test01","test02","test03"],
    ["test11","test12","test13"],
    ["test21","test22","test23"],
    ["test31","test32","test33"],
    ["test41","test42","test43"]
  ]
  ;
}]);

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angularjs@1.5.8" data-semver="1.5.8" src="//opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>
<body ng-app="myApp">
  <section ng-controller="MyController">
  <div ng-repeat="data in flow">
  
      Index: {{ $index }}
      <div ng-click="flow.splice($index, 1)">Delete me [{{ $index }}]</div>
  
      <div ng-repeat="inside_data in flow[$index]">
          Inside index: {{ $index }} : {{ inside_data }}
      </div>
      <hr>
  </div>
</section>
</body>
</html>

keeping track of nested ng-repeat index's

3 Answers3

Linked