如何获取angularui树中某项的键值或迭代?
How to get the key value or iteration of a certain item in angular ui tree?
我有一段代码是如何使用 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>
我有一段代码是如何使用 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>