AngularJS 嵌套 ng-repeat onclick

Question

我需要创建动态 ng-repeat，在填充它之后我想在每个重复项上添加一个点击功能，然后在点击时我想在被点击的元素内添加另一个重复。这是为了创建一个小的电影管理器，所以在文件夹上单击我想添加一个文件列表（

<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 元素，但您可以也可以只用 "recursive" 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 的函数。

这里有一个plunker可以玩

AngularJS 嵌套 ng-repeat onclick

AngularJS nested ng-repeat onclick

angularjs

ng-repeat