Search code examples
angularjsindexingparentangularjs-ng-repeatng-bind

$parent.$index not working inside ng-bind but works in the DOM

My problem is that I want to dynamically generate scope variable based on the indexes from 2 nested ng-repeat directives. When I show that expression in the DOM it works fine but that same inside ng-bind does not work. (The $index work but $parent.$index does not) Here is my code:

<div class="panel panel-primary" ng-repeat="device in home.devices">
    <div class="panel-heading">
      <h3 class="panel-title pull-right">
        <a href="#settings">
            <em class="fa fa-cog"></em>
        </a>
      </h3>
        <h3 class="panel-title" ng-bind="::device.name"></h3>
    </div>
    <div class="panel-body">
          <div class="row">
            <div class="col-lg-4 text-center" ng-repeat="sensor in device.sensors">
                <div class="panel panel-default">
                    <div class="panel-body">

                        <h2 ng-if="device.type == 'bm'" ng-bind="t{{$parent.$index}}{{$index}}"></h2>
                        t{{$parent.$index}}{{$index}}
                    </div>
                </div>
            </div>
          </div>
    </div>
  </div>

Image: $parent.$index in ng-bind does not work

Solution

  • I bet the $parent is actually the scope created by the ng-if.

    Try it without the ng-if, see if it works. Then, use $parent.$parent.$index

    Which is, of course, horrible.

    You could do ng-show instead of ng-if. It's still horrible, and leaves a nasty surprise to the next developer that sees that code and tries to improve it using ng-if. But hey, no $parent.$parent!

    How to do it "properly", is a good question.

    I would try not to use $index at all. Is there some ID in device and sensor that you can use for the same thing? That may have the additional advantage of always having the same value for a given item, no matter the order, if that's important.