AngularJS嵌套NG-重复的onclick [英] AngularJS nested ng-repeat onclick

问题描述

我需要创建我的动态NG重复，填充后我想在每个重复项目添加点击功能，然后点击我要添加点击的元素内的另一个重复。这对于建立一个小filme经理，所以文件夹点击我要添加的文件列表（

I need to create I dynamic ng-repeat, after populate it I want to add a click function on each repeat item and then on click I want to add another repeat inside the clicked element. This for create a little filme manager, so on folder click I want to add a list of file(

<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>

这是我的code中的问题是增加一个重复的onclick，这是最好的方法是什么？

this is my code the problem is add a repeat onclick, which is the best way?

推荐答案

这也可能是最好的一个指令来设计这一点，并动态地添加DOM元素，但你的可能的也只是递归这样做 NG-包括 - 我要让这是否是最佳的做法或反模式评论他人：）

It's probably best to design this with a directive and add DOM elements dynamically, but you could also do this with just "recursive" ng-include - I'll let others comment on whether this is a best practice or an anti-pattern :)

基本上，这利用了孩子作用域 NG-重复创建为每一个孩子和 NG-INIT 重新-alias列表的名称（文件夹的，例如）：

Basically, this leverages the child scope that ng-repeat creates for each child and ng-init to re-alias the name of the list (of folders, for example):

让我们说，文件夹内容的基本结构如下所示：

Let's say, the basic structure of folder contents is like so:

<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-包括，那么我们就可以重新使用它。

You can see the recursive nature. So, if we could abstract the inner folder into an ng-include, then we could reuse it.

最终的解决方案看起来像这样：

The final solution would look like so:

<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 =文件夹= F。它设置别名变量文件夹为每一个孩子的范围。同时，这也是并非偶然，其父使用相同的变量，最终，根：

Notice the ng-init="folder = f". It sets the alias variable folder for each child scope. It is also, not incidentally, the same variable used by its parent, and ultimately, the root:

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

getFolderContents 就是这样填充一个函数 folder.contents 的点击的文件夹中。

getFolderContents is just a function that populates folder.contents for a clicked-on folder.

下面是一个 plunker 玩

这篇关于AngularJS嵌套NG-重复的onclick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！