How to get parent's parent's parent's id in Angularjs

Question

I have a problem. I need to know how to get grandparent's ID in AngularJS. I need "{{parent}}" to become "grand-parent". (it should be <div id="me-and-my-grand-parent">)

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {

    var pid = document.getElementsByClassName("i-am-a-child");

    var pid = this.parentNode.id;

if (this.parentNode&&this.parentNode.id)
var pid=this.parentNode.id;

$scope.parent = var pid;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
    <div id="grand-parent{{$index}}" ng-repeat="item in items">
        <div>
          <div>
            <div id="me-and-my-{{parent}}" class="i-am-a-child">
            </div>          
          </div>
        </div>
      </div>
</div>

My actual code

<li ng-repeat="project in projects" ng-class="{active: project.childToggle, '': !project.childToggle,hasChild: project.children.length > 0 }" ng-dblclick="childToggleCt(project)" id="project-{{$index}}">
  <div class="project-overview">
    <header class="clearfix flip-area">
      <span ng-if="!project.inCart" class="status dropdown-button warning pull-left" id="id-{{ParentIdShow}}" data-intro="Status bar" data-position="right">Pending</span>

And for now JS was like tis :

$scope.ParentIdShow = function(obj) { alert(obj.target.parentNode.parentNode.parentNode.id); }

Why do you need this id? that's a very weird requirement in an angular app. — Kevin B, Mar 19 '15 at 19:20
That parent Id could have {{$index}} because it is ng-repeat div, and I need that div inside have unique id: parent is `id{{$index}}` so it is for example "id1", and child will be than "child-id1" - unique! — Anton Temchenko, Mar 19 '15 at 19:24
Your controller should be DOM-agnostic. Don't manipulate it, don't access, don't make assumptions about it. Manipulate only the scope. What you are trying to do goes against Angular's model/paradigm. To learn more, [read this.](http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background) — New Dev, Mar 19 '15 at 19:24
@AntonTemchenko your code sample does not have _ngRepeater_. Please post your actually code — Grundy, Mar 19 '15 at 19:26
@KevinB, it's not working like this, cause it's child element... i tried... — Anton Temchenko, Mar 19 '15 at 19:27
with your div samples it seems to work: [fiddle](https://jsfiddle.net/jjc58bwm/), also you use function `ParentIdShow` wrong — Grundy, Mar 19 '15 at 19:38
This feels to me like an example of the XY Problem, and definitely not "Thinking in AngularJS". — Claies, Mar 19 '15 at 19:43
@Claies I agree. Just trying. Just studying. And need help. I didn't invent any other idea to make the div to have unique id inside other divs inside ng-repeater — Anton Temchenko, Mar 19 '15 at 19:47
@AntonTemchenko are you try sample from this [fiddle](https://jsfiddle.net/jjc58bwm/1/)? Are you try get something like this? — Grundy, Mar 19 '15 at 19:51
@Grundy Wow. no I wroted by myself the sample... ofcourse with google, but didnt see this sample. it can be the answer. I should check it — Anton Temchenko, Mar 19 '15 at 19:54
are you trying to set the Id for the elements so that some other library can find your elements? I really know the more I read this that it's an XY problem. You have some sort of unknown *problem*, but instead of asking how to solve that problem, you came up with a *solution* that doesn't work, and frankly isn't making sense. You really could help us help you by asking how to solve your *problem*... http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem/66378#66378 — Claies, Mar 19 '15 at 19:55
:-D ofcourse you can't see this fiddle because i create it 30 min ago — Grundy, Mar 19 '15 at 20:02
Anyway as say @Claies you have an `XY problem` so possibly if you explain your main problem, for example _why you need this id?_ we can help you more consistent — Grundy, Mar 19 '15 at 20:06
@AntonTemchenko so you need [create a Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve) with your current code because otherwise we can only guess what you really need and what you really try solve — Grundy, Mar 19 '15 at 20:08

score 0 · Answer 1 · answered Mar 19 '15 at 19:40

0

The answer to these types of "parent of my parent of my parent of my..." is to use the controller as syntax. Read more about it here. In short, it lets you do stuff like

<div ng-controller="ctrl1 as first">
  <div ng-controller="ctrl2 as second">
    ...
        <div ng-controller="ctrlN as Nth">
          <div ng-repeat="i in arr">
              {{first.property}}
              {{second.otherProperty}}
              {{Nth.nProperty}}

Note how you dont need any parent calls.

answered Mar 19 '15 at 19:40

David says Reinstate Monica

19,209
22
79
122

how it helps with `ngRepeat`? – Grundy Mar 19 '15 at 19:41
@Grundy It works the same inside an `ng-repeat` (I presume thats what you're talking about). Ill update my example to make it clearer – David says Reinstate Monica Mar 19 '15 at 19:42
in OP not used controllers, all inside `ng-repeat` – Grundy Mar 19 '15 at 19:44
@Grundy What are you talking about? he creates a controller in his JS and he has `ng-controller=...` in his HTMl – David says Reinstate Monica Mar 19 '15 at 19:46
i mean, he set id,depends on index, for element with ng-repeat attribute, and try use it id inside. it not use property from controller – Grundy Mar 19 '15 at 19:48

How to get parent's parent's parent's id in Angularjs

1 Answers1