AngularJS 嵌套 ng-repeat onclick [英] AngularJS nested ng-repeat onclick

问题描述

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

<div class="title" ng-click="clicked(id)">{{f.id}} - {{f.titolo}}</div>

这是我的代码，问题是添加重复点击，这是最好的方法?

解决方案

最好使用指令来设计它并动态添加 DOM 元素，但您也可以仅通过递归"来实现ng-include - 我会让其他人评论这是最佳实践还是反模式:)

基本上，这利用了 ng-repeat 为每个子级创建的子级作用域和 ng-init 为列表(文件夹，例如示例):

比方说，文件夹内容的基本结构是这样的:

内容:{{folder.name}}<li ng-repeat="f in folder.contents"><span ng-click="getFolderContents(f)">{{f.name}}</span><ul ng-if="f.contents.length">内容:{{f.name}}<li ng-repeat="childF in f.contents">... 等等

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

最终的解决方案如下所示:

<ul ng-include="'folderTemplate'"></ul><script type="text/ng-template" id="folderTemplate">内容:{{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>

注意 ng-init="folder = f".它为每个子作用域设置别名变量 folder.顺便说一句，它也是其父级使用的变量，最终也是根:

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

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

这是一个 plunker 玩

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>

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

解决方案

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

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>

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>

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 is just a function that populates folder.contents for a clicked-on folder.

Here's a plunker to play with

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