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

Question

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?

javascript angularjs angular-ui-tree

Answer 1

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>

Answer 2

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>

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

Answer №1

Similar questions

"Exploring the possibilities of customizing Material UI tabs and implementing a tabs scroller

Storing multilingual JSON data in AngularJS for faster access

What is the best way to conceal the HTML video controls for multiple videos displayed on a single webpage?

What is the best way to extract and count specific values from a JSON file using JavaScript?

Getting POST data in Next.js is a common task that requires understanding of how the

Vanilla JavaScript // Conceal a div when the class of another div is modified

When trying to append in jQuery, the error "JQuery V[g].exec is not a

Having issues with images not loading and receiving a 401 error with the API while using Vite in a production build

Issue loading a 300 MB file into BigQuery results in a timeout error

Ways to rejuvenate and invigorate your entire perspective

The local ESlint plugin is causing issues with installing dependencies on our CI environment

What could be causing VueJs2 computed properties to not update?

Combining NodeJS and ExpressJS to deliver a unified JavaScript file when in production mode

Tips for formatting a lengthy SQL query in a Node.js application

Symfony2 encountering difficulties in locating file after deployment

Wait for response after clicking the button in Vue before proceeding

AJAX forms and snippets

Material-UI - Switching thumb styles in a range slider

JavaScript - the global and local variable dilemma

How to Implement Button Disable Feature in jQuery When No Checkboxes Are Selected