How can I access the parent elements within a recursive directive?

I'm currently implementing a recursive directive called https://github.com/dotJEM/angular-tree to iterate through a model structure like the one below:

  $scope.model = [
      {
          label: 'parent1',
          children: [{
              label: 'child'
          }]
      }, 
      {
          label: 'parent2',
          children: [{
              label: 'child',
              children: [{
                  label: 'innerChild'
              }]
          }]
      }, 
      {
          label: 'parent3'
      }
  ];

This is how the code appears in the template:

<div data-dx-start-with="model">
    <div data-ng-repeat="node in $dxPrior">
        <a class="list-group-item">
            <span class="icon" data-ng-click="toggle(node)"><i class=" icon ion-android-arrow-dropdown"></i>&nbsp;</span>
            <span>{{ node.label}} ({{node.children.length}})</span>
        </a>
        <ul data-ng-show="node.expanded" data-dx-connect="node.children"></ul>
    </div>
</div>


I am looking for a way to access each parent in order to construct a breadcrumb navigation path of the treeview.

Example: parent2 > child > innerChild > ...

While I can retrieve a single node's parent using $parent, my goal is to obtain all parents. Any ideas on achieving this?

To demonstrate my point further, I've put together a plunker demo: http://plnkr.co/edit/DOc9k4jT9iysJLFvvg3u?p=preview

javascriptangularjsrecursiontree

Answer №1

If you need to create breadcrumbs in your AngularJS application, one way is to write a function that traverses through the parent elements until it reaches the root and builds an array of parents at each step:

$scope.getParentsBreadcrumb = function (thisScope) {
  var parents = [];
  while (thisScope && thisScope.node) {
    parents.unshift(thisScope.node.label);
    thisScope = thisScope.$parent.$parent;
  }
  return parents.join(' > ');
}

After defining this function, you can call it in your template where you want to display the breadcrumbs:

{{getParentsBreadcrumbs(this)}}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to declare a string enum in TypeScript because string is not compatible

enum Animal { animal1 = 'animal1', animal2 = 'animal2', animal3 = 'animal3', animal4 = 'animal4', animal5 = 'animal5' } const species: Animal = 'animal' + num Why does typescr ...

javascripttypescript

Transferring Data from JSON Object to an Array

In my AngularJS Controller, I have the following object: {"team":"1","name":"abc","age":"20"}, {"team":"1","name2":"def","age2":"21"}, {"team":"2","name":"ghi","age":"22"}, {"team":"2","name2":"jkl","age2":"23"}, I am looking to consolidate the items int ...

arraysjsonangularjsobject

Is it possible to verify the data within a VueJS model? It seems that none of the Vue validators are effective

Hello there, It's common knowledge that using Vue-validator with most UI components can be challenging when it comes to validation. I've been utilizing Vue Material Components by @mjanys, which is a fantastic library. The author has included met ...

javascriptvalidationvue.js

I am experiencing an issue where the result is not appearing on the input tag within my

<script> <form action="do-add-cek.php" id="myForm" method="post" enctype="multipart/form-data"> <div class="form-group"> <label> ...

javascript

There was an error during product validation that occurred in the userId field. In the Node.js application, it is required to

I am in the process of developing a small shop application using node.js, express, and mongoose. However, I have encountered an issue when attempting to send data to the MongoDB database via mongoose. Here is the product class I have created: const mongoo ...

javascriptnode.jsmongodbexpressmongoose

Loading Java Script files in real-time

Is there a method to dynamically load JS files before "$(document).ready" is triggered, while still having them available in the ready event handler? Is there a feature in jQuery that allows for this process? The challenge I am facing involves loading di ...

javascriptjquery

What could be causing the value of response.name to be undefined in this situation?

Despite extensively searching through various StackOverflow threads, none of the suggested solutions seemed to work for my specific scenario. Upon analyzing the response using console.log(response), I received an "Object Object" message. I am puzzled as to ...

javascriptangularjsfacebook

Designing a carousel-style menu list with navigation buttons for moving forward and backward

I'm running into some trouble while attempting to create a carousel. Firstly, the issue I am facing is that when you continuously click on the Next button, the function keeps working even after reaching the last item. I'm not sure how to make th ...

javascripthtmljquerycss

The fixed positioned div with jQuery disappears when scrolling in Firefox but functions properly in Chrome, IE, and Safari

Click here to see a div located at the bottom of the right sidebar that is supposed to behave as follows: As you scroll down the page, the div should change its class and become fixed at the top of the screen until you reach the bottom of the parent el ...

javascriptjqueryhtmlcssfirefox

Generating documents in Word or PDF format using PHP and Angular data

My goal is to generate a Word document using PHP for which I found a solution involving the use of headers. header("Content-type: application/vnd.ms-word"); header("Content-Disposition: attachment;Filename=output.doc"); Initially, this method worked well ...

javascriptphpangularjs

AngularJS $scope variable can be initialized only once using an HTTP GET request

I'm facing an issue with fetching data from an API in a separate AngularJS application. There's a button that triggers the retrieval of data from the API. Upon clicking, it executes the $scope.getApiData function, which is connected to $scope.pr ...

javascriptangularjshttp

Ways to access and retrieve data from Vuex store values?

Combining vuex and vuejs 2 for the first time. I'm a beginner with vuex and I need to monitor changes in a store variable. Trying to implement the watch functionality within my vue component. This is my current code snippet: import Vue from ' ...

javascriptvue.jsvuejs2vuex

Is it possible to pass an HTML element's id attribute to a function in JavaScript?

In the following code snippet, I am looking to send the id=content to the function mr and then display the result in the passed id=result. While this functionality is currently limited to this HTML file, I aim to extend it to other HTML pages by adding the ...

phpjavascriptajaxxmlhttprequest

Refresh the table dynamically in Django without the need to reload the entire page

Seeking assistance to update a small table with new data every 10 seconds on a Django website. The data is parsed into JSON and refreshed in the database, then displayed on the front-end. Looking for help with writing AJAX code to continuously refresh the ...

javascriptjqueryajaxdjangodjango-views

The response data from Axios remains undefined even after a successful request

function verifyPassword() { let pass = document.getElementById("password").value let emailAddr = document.getElementById("email").value Service.confirmLoginPassword(emailAddr, pass).then(response => { result = re ...

javascriptreactjsaxios

Creating a virtual roulette wheel with JavaScript

I'm currently working on creating a roulette wheel using JavaScript. While researching, I came across this example: , but I wasn't satisfied with the aesthetics. Considering that my roulette will only have a few options, I was thinking of using ...

javascriptjqueryhtmlcss

Retrieving column values from a Datatable is limited to the first 10 rows

Trying to extract the values from column 1. I followed the instructions provided in the datatable documentation: var data = table.column( 0 ).data(); Table setup: var datatable = table.dataTable({ "scrollX" : "100%", "scrollY" ...

javascriptjquerydatatables

Is it possible for me to sum up each row in the table and then deactivate it using a checkbox?

I am facing an issue with my code. The problem arises when I utilize the each() function; it iterates from the first cell to the end of the row, fetching every value along the way. What I actually want is for it to retrieve the value from each row individu ...

javascriptjquery

Encountering an issue following the installation and integration of an npm module within a Meteor

I recently started a project using the latest version of Meteor. I added a new package by running the command: meteor npm install --save name_of_package Since this package is meant for the client side, I created a file called mypackage.js inside the /cli ...

javascriptmeteornpm

Encountering an issue with my node configuration while working on a Discord bot

Attempting to develop my own Discord Bot has presented me with a challenging error that I am struggling to resolve: internal/modules/cjs/loader.js:968 throw err; ^ Error: Cannot find module './commands/${file}' Require stack: - C:\Users&bso ...

javascriptnode.jsdiscord.js