Question

我需要创建一个html结构，如下所示：
<ul>
<li id="r1_1">Root node 1
    <ul>
      <li id="child_node_1">Child node 1</li>
      <li id="child_node_2">Child node 2</li>
      <li id="child_node_3">Child node 3</li>
    </ul>
  </li>
  <li id="r1_4">Root node 2
    <ul>
      <li id="child_node_4">Child node 4</li>
      <li id="child_node_5">Child node 5</li>
    </ul></li>
</ul>   </div>
我的问题是我无法生成id索引。我需要去做这使用angularjs。有人可以帮忙吗？我对angularjs很新。

Answer 1

正如tymeJV所提到的，你可以使用ng-repeat和$ index来完成它。

这是一个带有示例的工作人员： http://plnkr.co/edit/S4H08rHgpQlGhY18VkNP?p=preview

<ul>
  <li ng-repeat="root in rootNodes" id="someprefix_{{calculateRootId($index)}}">
    {{root.node}} calculated id: someprefix_{{calculateRootId($index)}}
    <ul>
      <li ng-repeat="item in root.items" id="someprefix_{{$index +1}}">Child node {{$index + 1}}</li>
    </ul>
  </li>
</ul>

编辑：更新了plunkr以满足您的要求，请注意使用辅助函数来计算id是非常有用的，但是为您的数组项（根和子）提供先前计算的Id变量会很好在您的控制器上，只需绑定它。

上述解决方案有效，但我不推荐。我喜欢尽可能地将逻辑与视图分开，这是最好的做法。话虽如此，请查看另一个示例：http://plnkr.co/edit/QsnZFlCx347nnSnkFj7W?p=preview

这里id生成的逻辑全部在控制器中，因此视图可以直接绑定到计算的id，并且还可以在必要时更容易地更改或自定义逻辑：

<ul>
  <li ng-repeat="root in rootNodes" id="{{root.id}}">
    {{root.name}} id: {{root.id}}
    <ul>
      <li ng-repeat="item in root.items" id="item.id">{{item.name}} id: {{item.id}}</li>
    </ul>
  </li>
</ul>

希望有所帮助。

从angularjs生成标记ID

1 个答案: