个人中心
文章发布
退出
作者热门文章
- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库？
- java - OnItemClickListener 不起作用，但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
25
4
我制作了一个递归的 ng-repeat 元素，试图操纵事物变成了一场噩梦，因为我没有引用我正在迭代的父元素。
ng-repeat 看起来像这样:
ng-repeat="(key, value) in value"
记住它是递归的，所以 value 中的每个值都会成为新值，所以我不能只使用 ng-repeat 中的“in”值。我想做这样的事情，比如检查父级是否是一个数组，但是 $parent 是一些奇怪的东西，而不是当前迭代值的父元素。
我想做的事情的一些例子是:
ng-show="isArray(parent)"
ng-click="delete(parent, $index)"
(作为我正在做的工作的一个例子，我不得不向我的每个数组元素添加一个 ___ISARRAYELEMENT___ 属性，只是为了知道它在一个数组中 >.>;;)
编辑:基本上我想知道在我遗漏的 ng-repeat 上下文中是否有任何方便的元数据。
编辑:好的，这是完整的 html:
<html ng-app>
<head>
<title>JSON CRUD</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<script src="angularjsoncrud.js"></script>
<script type="text/ng-template" id="node.html">
<button ng-click="minimized = !minimized" ng-show="!isLeaf(value)" ng-init="minimized=false" ng-class="{'glyphicon glyphicon-plus': minimized, 'glyphicon glyphicon-minus': !minimized}">-</button>
<input ng-model="value.___KEY___" ng-if="!isArrayElement(value)" />
<input ng-if="isLeaf(value)" ng-model="value.___VALUE___" />
<ul ng-if="!isLeaf(value)" ng-show="!minimized">
<li ng-repeat="(key,value) in value" ng-if="key != '___KEY___' && key != '___ISARRAY___'" ng-include="'node.html'"></li>
<button type="button" ng-if="isArray(value)" ng-click="addToArray(value)">Add Element</button>
</ul>
</script>
</head>
<body ng-app="Application" ng-controller="jsoncrudctrl">
<ul>
<li ng-repeat="(key,value) in json" ng-include="'node.html'"></li>
</ul>
<pre>{{stringify(json)}}</pre>
</body>
</html>
我想做的一件事是用 isArray(parent) 替换 isArrayElement(value)，因为 isArrayElement 依赖于我添加到数组中的元数据，我希望不必添加这些元数据。
最佳答案
ng-repeat 为每个元素创建一个新范围。ng-include 还会创建一个新范围。
当您将 ng-include 与 ng-repeat 一起使用时，会为每个元素创建 2 个作用域:
ng-repeat 为当前元素创建的作用域。此范围包含迭代中的当前元素。ng-include 创建，继承 ng-repeat 创建的范围。 当前范围的 $parent 属性允许您访问其父范围。
本质上，当您在 node.html< 中访问 ，它实际上从 value 和 key 时，ng-include 创建的作用域是空的ng-repeat 创建的父范围访问继承值。
在你的node.html中，访问{{value}}其实和{{$parent.value}}是一样的。因此，如果您需要访问当前元素的父元素，则必须进一步访问 {{$parent.$parent.value}}
这DEMO将清理一切:
<script type="text/ng-template" id="node.html">
<div>
Current: key = {{key}}, value = {{value}}
</div>
<div>
Current (using $parent): key = {{$parent.key}}, value = {{$parent.value}}
</div>
<div>
Parent: key = {{$parent.$parent.key}}, value = {{$parent.$parent.value}}, isArray: {{isArray($parent.$parent.value)}}
</div>
<ul ng-if="isObject(value)"> //only iterate over object to avoid problems when iterating a string
<li ng-repeat="(key,value) in value" ng-include="'node.html'"></li>
</ul>
</script>
如果您需要简化访问父级的方式，您可以尝试使用ng-include 的onload 来初始化父级。像这样:
在你的顶层，没有 ng-if => 只有 2 层深
<ul>
<li ng-repeat="(key,value) in json"
ng-include="'node.html'" onload="parent=$parent.$parent"></li>
</ul>
在你的子关卡中，有 ng-if => 3 层深:
<ul ng-if="isObject(value)">
<li ng-repeat="(key,value) in value"
ng-include="'node.html'" onload="parent=$parent.$parent.$parent"></li>
</ul>
在模板中，您可以使用 parent 访问父级，使用 parent.parent 等访问祖父级。
关于javascript - 递归地在ng-repeat中迭代时如何在ng-include中获取父元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20876358/
25
4
0
这个问题已经有答案了: 已关闭12 年前。 Possible Duplicates: what is the difference between #include and #include “fi
我想使用 #include 指令，其文件名作为外部定义的宏传递。 例如 #include #FILE".h" 其中 FILE 将被定义为字符串 MyFile(不带引号)，结果为 #include "M
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。 想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。 7年前关闭。 Improve thi
我想在当前目录及其子目录下的每个 .m 文件中查找所有出现 ncread 的情况。我使用以下命令: grep -R --include="\.m" ncread . 但是该命令没有返回任何内容。 gr
有时我会遇到这样的情况，我发现我需要为大型第三方文件制作一个#include，这样我才能使用一个函数或一个小类，这让我感到内疚，因为我知道这已经消失了增加我的编译时间，因为当我只想要一个功能时它会编译
这个问题在这里已经有了答案: 关闭13年前. Possible Duplicate: what is the difference between #include and #include “fi
我正在尝试通过应用程序加载器提交应用程序。我收到这个错误。但我已经检查了build设置，所有三种架构都包含在有效架构设置中。 最佳答案 断开任何设备，只保留“iOS 设备”中的选项并将其存档。 关于i
Please check this demo plunker更好地理解我的问题。 在我的主页上有一个表格。每个表行后面都有一个最初隐藏的空行。单击第一行时，我使用指令在其下方的空行中注入(inject
我正在使用 mkdocs 创建 html 网页和片段扩展以将我的主文档分成小块。我有一个难以理解的错误: 在我制作的文件file1.md中: --8<-- includes/some_rep/frag
include的推荐方式是什么？您项目的所有文件？ 我见过很多使用类似结构的例子: include 的有序列表单个顶级文件(定义 Module 的文件，或应用程序中的“主”文件)中的语句。 这似乎也是
我想知道如何使用 fx:include与 JavaFX Scene Builder 结合使用，因此: 想象我有一个 BorderPane (文件 borderpane.fxml)。在中间部分我想放一个
我看到 Fortran 有“调用”和“包含”语句。两者有什么区别？ .i 文件类型有什么意义吗？ 即: include 'somefile.i' call 'somesubroutine.f' 谢谢!
这很挑剔，可能没有任何实际用途。我只是好奇... 在 C++20 工作草案 (n4861) 中， header 名称定义为: (5.8) header-name: " q-char-
这个问题已经有答案了: 已关闭10 年前。 Possible Duplicate: What is the difference between #include and #include “fil
我有一个非常庞大且臃肿的类，我想将它拆分成单独的文件，但它应该对用户完全透明并且与使用该类的现有项目兼容。 特别是，我有自己的 ImageMatrix 类，它定义了大量的一元函数、大量带有标量的二元函
我是 grep 的新手，在重构 C 和 C++ 文件的过程中，我遇到了替换系统的问题，包括 #include <>与本地包括 #include "" . 有没有一种方法可以将 grep 与任何替代工具
我正在制作一个 Spring MVC web 项目，我必须有一个常量 header 。 我的基本要求是“我们希望在所有屏幕上都有一个标题，以显示谁登录了 ProjectA。” 我从这里“What is
在 SWIG 中，“%include”指令与标准 C“#include”有什么区别？ 例如，在所有教程中，为什么它们通常看起来像这样: %module my_module %{ #include "M
假设我们有这个头文件: MyClass.hpp #pragma once #include class MyClass { public: MyClass(double); /* .
我已经在一个项目上工作了一段时间，该项目实现了一个使用 C 库的自定义框架。该框架是用 Swift 编写的，我创建了一个模块来向 Swift 公开 C 头文件。该框架是在不同的项目中启动的，然后将该框
我是一名优秀的程序员,十分优秀！