AngularJS recursive(递归)

　　工作中我们经常要遍历多层数据，如果数据是已知层级的话，用 ng-repeat 就搞定了，要是数据深度是无限的呢，或者我们要实现一个无限层级的 tree 的时候，该怎么办？

　　答案是使用 ng-include 指令递归模板。假如我们有如下数据：

$scope.categories = [{ title: 'Computers',categories: [{title: 'Laptops',categories: [{title: 'Ultrabooks'},{title: 'Macbooks'            }]},{title: 'Desktops'},{title: 'Tablets',categories: [{ title: 'Apple'},{title: 'Android'}]        }]},{title: 'Printers'}
];//注意这组数据会动态增加并无限延伸下去

　　我们的目标是呈现出一个 tree ，这时我们就要用到一个模板来递归渲染 tree 中的每一级，首先要定义一个内联模板：

<script type="text/ng-template" id="categoryTree">{{ category.title }}<ul ng-if="category.categories"><li ng-repeat="category in category.categories" ng-include="'categoryTree'">           </li></ul>
</script>

　　然后在根节点引用递归模板：

<ul><li ng-repeat="category in categories" ng-include="'categoryTree'"></li>
</ul>

　　实现原理：

　　ng-repeat 在每次迭代数据的时候会创建一个子 scope 。我们在模板中引用的 category 变量是属于当前的那次迭代，递归模板能正常工作的原因是我们在模板内部和外部都使用了相同的变量 category 。如果你想使用不同的变量名，那么你应该先使用 ng-init 初始化：

<li ng-repeat="parentCategory in categories" ng-include="'categoryTree'" ng-init="category=parentCategory">
</li>

参考：http://benfoster.io/blog/angularjs-recursive-templates

转载于:https://www.cnblogs.com/kuangliu/p/4146705.html

AngularJS recursive(递归)相关推荐

SQL：With recursive 递归用法
With Recursive as 有两种递归字段n的声明写法,第一种是在with- as 中声明需要递归的字段,第二种是在sql语句中第一段的初始值内声明变量. WITH RECURSIVE cte ...
WITH RECURSIVE递归
1.向上递归查询到父节点(避免死循环) WITH RECURSIVE org AS ( SELECT * FROM tb_org WHERE org_id IN ('**') UNION ALL SE ...
MySql递归RECURSIVE的详解
背景: 在实际开发的过程中,我们会遇到一些数据是层级关系的.要展示数据子父级关系的时候, 第一个解决方案:将数据库中的所有数据都查询出来用Java代码进行处理. 第二个解决方案:可以考虑MySql中的 ...
sql cte递归_准备好，开始吧– SQL Server如何处理递归CTE
sql cte递归 First of all, a quick recap on what a recursive query is. 首先,快速回顾一下递归查询是什么. Recursive quer ...
扒网站工具 linux,wget 递归下载整个网站(网站扒皮必备)
wget 递归下载整个网站(网站扒皮必备) 有时间看到别人网站的页面比较漂亮,就想给扒皮下来,学习学习.分享一个我常用网站扒皮命令wget 这个命令可以以递归的方式下载整站,并可以将下载的页面中的链接 ...
斐波拉契数列的递推递归求解算法
介绍: 斐波那契数列(Fibonacci sequence),又称黄金分割数列.因数学家列昂纳多·斐波那契(Leonardoda Fibonacci)以兔子繁殖为例子而引入,故又称为"兔子数 ...
归并排序（基于顺序容器vector_递归；基于数组array_递归_非递归）
代码1:基于顺序容器vector 1 /*2 * FILE: merge_sort_vector.cpp3 * ---------------------------4 * DATE: 2017081 ...
斯坦福CS224n NLP课程【十四】——树RNN递归和短语句法分析
语言光谱模型对于语义相似性等这类目标来说,最好的方法还是词袋最简陋最常用的是词袋模型,或"词向量袋模型".最复杂的可能是短语结构树,额外再标注一些诸如指代.语义等标签. 这张图 ...
PostgreSQL WITH（WITH RECURSIVE）查询表达式
PostgreSQL9.6中对WITH查询有如下描述 WITH提供了一种方式来书写在一个大型查询中使用的辅助语句.这些语句通常被称为公共表表达式或CTE,它们可以被看成是定义只在一个查询中存在的临时 ...

AngularJS recursive(递归)

AngularJS recursive(递归)相关推荐

最新文章

热门文章