Looking to retrieve the key value or iteration of a specific item within an Angular UI tree?

Here is a snippet of code showcasing how to use angular-ui-tree:

<div ui-tree>
  <ol ui-tree-nodes="" ng-model="list">
    <li ng-repeat="item in list" ui-tree-node>
      <div ui-tree-handle>
        {{item.title}}
      </div>
      <ol ui-tree-nodes="" ng-model="item.items">
        <li ng-repeat="subItem in item.items" ui-tree-node>
          <div ui-tree-handle>
            {{subItem.title}}
          </div>
        </li>
      </ol>
    </li>
  </ol>
</div>

If I have an {{item}}, is it possible to determine its position in the loop? For example, can I apply different styles based on whether the item's iteration is odd or even?

javascriptangularjsangular-ui-tree

Answer №1

If you incorporate $index in your ng-repeat iteration, it will provide you with the iteration number.

ng-class="{ even : $index%2 == 0, odd : $index%2 != 0 }"

Cascading Style Sheets (CSS) 

.even {
    color: blue;
}
.odd {
    color: red;
}

Final implementation

   <div ui-tree>
        <ol ui-tree-nodes="" ng-model="list">
            <li ng-repeat="item in list" ui-tree-node>
                <div ui-tree-handle>
                    {{item.title}}
                </div>
                <ol ui-tree-nodes="" ng-model="item.items">
                    <li ng-repeat="subItem in item.items" ui-tree-node>
                        <div ui-tree-handle ng-class="{ even : $index%2 == 0, odd : $index%2 != 0 }">
                            {{subItem.title}}
                        </div>
                    </li>
                </ol>
            </li>
        </ol>
    </div>

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

What is the best way to convert a string to an integer in JavaScript while still maintaining compatibility with Internet Explorer 11?

Here is the code snippet that I am working with: setCol (param) { // missing forEach on NodeList for IE11 if (window.NodeList && !NodeList.prototype.forEach) { NodeList.prototype.forEach = Array.prototype.forEach; } const a ...

javascriptjqueryvue.jsinternet-explorerparseint

What could be causing the controller to malfunction when the script is placed outside of the index.html file?

I find myself caught up in a dilemma. Whenever I attempt to replicate the tutorial from , by copying and pasting the code below: <html ng-app="myApp"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/a ...

javascriptangularjsangularjs-controller

Pagination activates on the second tap

Check out my example on jsFiddle: https://jsfiddle.net/0se06am5/ class Pagination extends React.Component { constructor(props) { super(props); this.state = { current: 1 }; this.items = ['a', 'b', 'c&ap ...

javascriptreactjs

An error was encountered while linting /app/layout.tsx at line 16: Rule "@typescript-eslint/no-empty-function" was violated due to inability to read properties of undefined (reading 'getTokens')

I am puzzled as to why the function that generates JSX is being checked by the "next lint" script with the rule "@typescript-eslint/no-empty-function". The code snippet at line 16 of the layout.tsx file looks like this: export default function RootLayout( ...

javascriptreactjsnext.jseslinttypescript-eslint

What could be causing the JSON.stringify() replacer function to fail?

Here is the code snippet I'm working with: http://jsfiddle.net/8tAyu/7/ var data = { "foundation": "Mozilla", "model": "box", "week": 45, "transport": { "week": 3 }, "month": 7 }; console.log(JSON.stringify(data, ...

javascriptjson

Is the auto-import feature in the new VSCODE 1.18 compatible with nodelibs installed via npm?

Testing out the latest auto-import feature using a JS file in a basic project. After npm installing mongoose and saving an empty JS file for editing, I anticipate that typing const Schema = mongoose. will trigger an intellisense menu with mongoose nodelib ...

javascriptnode.jsvisual-studio-codeauto-import

What is the best way to connect a JavaScript file to an HTML file in an Express app?

I have my NodeJS server set up with Express, utilizing Handlebars as the rendering engine. app.use(express.static(publicDirPath)) (...) app.engine("hbs",hbs({ extname: "hbs", defaultView: "main", layoutsDir: path.join(srcDirP ...

javascripthtmlnode.jsexpress

Is javascript or ajax the best choice for updating a database in asp.net mvc?

I need help with updating a row in my database based on a change event from a dropdown list. I am not sure whether to use javascript or ajax for this purpose as I want to avoid page refresh. Any recommendations on which method is best and where I can find ...

javascriptjqueryajaxasp.net-mvc

Using AngularJS, you can display repeated elements in a single textarea by utilizing

--> I want to be able to input data into a textarea using just one textarea element. --> The reason for this is so that when the data in MySQL is updated, I can type new data in the textarea while still keeping the existing data. I have tried using ...

javascripthtmlmysqlangularjs

What are some solutions for troubleshooting a rapid-moving Selenium web driver?

My code is not functioning correctly and I need a better solution. The fast speed of execution makes it difficult for me to detect where the issue lies. Below is my current code: public static void main(String[] args) { //**************************** ...

javascriptseleniumselenium-webdriver

Issues with Content-Security-Policy Implementation in Next JS and AMP Technology

While developing an AMP application with Next JS, everything seems to work perfectly in localhost. However, upon moving to the production environment, I encountered errors related to AMP not being allowed to load its workers. The initial error message is: ...

javascriptnext.jsamp-htmlcontent-security-policy

Sentry platform is failing to record network-related problems

Incorporating Sentry into my Next.JS application has allowed me to easily detect JavaScript errors such as reference or syntax issues on the Sentry platform. Unfortunately, I have encountered some challenges as Sentry is not logging any network-related er ...

javascriptnext.jssentry

What is the best way to display the L.featureGroup using an array of coordinates?

Is there a way to render the L.featureGroup using an array of coordinateRoute from the data.json file, and then trigger it with a button labeled "Snake it!"? Essentially, I want to be able to click on "snake it!" which will have its own unique id, causing ...

javascriptarraysreactjsloopsreact-leaflet

Preserve the chosen option in a dropdown menu even after a postback using JavaScript

Seeking Help in Retaining Dropdownlist Selected Value After Postback In my efforts to retain a dropdownlist selected value after postback, I have been exploring various methods. I extract the selected values from the dropdownlist and store them in local ...

javascriptjqueryasp.net

Tracking the referral source when the email box is clicked

document.referrer is a JavaScript method that returns the URI of the page that linked to the current page. If the user navigated directly to the page, for example through a bookmark, the value returned by document.referrer will be an empty string. You can ...

javascriptemailwebbrowserdocument

Trouble with the filter function in the component array

I am facing an issue with creating and deleting multiple components. I have successfully created the components, but for some reason, I am unable to delete them when I click on the "delete" button. state = { data: '', todoCard: [], id ...

javascriptarraysreactjs

Steps for retrieving the identifier of a duplicated element

I've copied an element and changed their IDs, but I'm having trouble fetching the IDs of the cloned elements in jQuery. Can someone assist me with this issue? The HTML view source code is provided below: <table id="dataTable" borde ...

javascriptjqueryajaxasp.net-mvcentity-framework

React: Oops! Looks like there's an issue - this.props.update is not defined as

Hello everyone, I'm diving into the world of programming for the first time and I might ask some silly questions along the way. Currently, I'm working on integrating a date picker into a search application built with React. The user should be ab ...

javascriptreactjsmaterial-uijsx

Ways to troubleshoot and verify values in PHP that are sent through AJAX

In my jQuery function, I am using AJAX to send values to a PHP file: $.ajax({ //make ajax request to cart_process.php url: "cart_process.php", type: "POST", dataType: "json", //expect json value from server data: { quantity: iqty, ...

javascriptphpjqueryajaxjson

Retrieve text content using jQuery from two different classes

HTML & jQuery Example <div class="box-a">1 <input type="button" value="Click Me" class="btn-click"> </div> <div class="box-a">2 <input type="button" value="Click Me" class="btn-click"> </div> jQuery Script $(".btn-cli ...

javascriptjquery