Question

我需要创建动态ng-repeat，在填充之后我想在每个重复项上添加一个click函数，然后单击我想在单击的元素中添加另一个重复。这对于创建一个小的filme管理器，所以在文件夹点击我想添加一个文件列表（

<li class="item_grid" ng-repeat="(id,f) in files | filter:query"  id="{{f.id}}" file-directive-right>
<div class="title" ng-click="clicked(id)">{{f.id}} - {{f.titolo}}</div>
</li>

这是我的代码，问题是添加重复onclick，这是最好的方法吗？

Answer 1

最好用指令设计它并动态添加DOM元素，但也可以用“递归”ng-include来做这件事 - 我会让别人评论是否这是一种最佳做法或反模式：）

基本上，这会利用ng-repeat为每个孩子创建的子范围，ng-init来重新别名列表的名称（例如文件夹）：

假设文件夹内容的基本结构如下：

<ul>
  contents of: {{folder.name}}
  <li ng-repeat="f in folder.contents">

    <span ng-click="getFolderContents(f)">{{f.name}}</span>

    <ul ng-if="f.contents.length">
       contents of: {{f.name}}
       <li ng-repeat="childF in f.contents">
         ... etc
       </li>
    </ul>
  </li>
</ul>

你可以看到递归的本质。因此，如果我们可以将内部文件夹抽象为ng-include，那么我们可以重用它。

最终解决方案如下：

<div ng-controller="folderCtrl">

    <ul ng-include="'folderTemplate'"></ul>


    <script type="text/ng-template" id="folderTemplate">
       contents of: {{folder.name}}
       <li ng-repeat="f in folder.contents" ng-init="folder = f">

          <span ng-click="getFolderContents(f)">{{f.name}}</span>

          <ul ng-include="'folderTemplate'" ng-if="f.contents.length"></ul>
       </li>

    </script>  
</div>

注意ng-init="folder = f"。它为每个子范围设置别名变量folder。它也不是偶然使用的是其父级使用的相同变量，最终是根：

$scope.folder = {name: "folder 1", contents: []};

getFolderContents只是为点击的文件夹填充folder.contents的函数。

这是一个与{/ 3>一起玩的plunker

AngularJS嵌套ng-repeat onclick

1 个答案: