如何在角度UI树中获取某个项目的键值或迭代

How to get the key value or iteration of a certain item in angular ui tree?

本文关键字：项目 键值 迭代 获取 UI      更新时间：2023-09-26

我有一段代码，它是如何使用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>

现在，如果我有一个 {{item}}，有没有办法让项目的迭代循环？例如，我想得到一个条件，例如，如果该项目的当前循环迭代是奇数或偶数，我可以更改树中某个节点的样式，例如，如果它是奇数或偶数，则根据其迭代，我有一个备用的蓝色和红色项目。

您可以在 ng-repeat 循环中使用$index，它将为您提供交互编号-

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

.CSS

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

最终代码

   <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>
相关文章：