Javascript angular.js数据仅显示最近的引用

我希望有多个文本元素，通过一个函数动态添加，设置键以始终显示输入文本字段的内容。相反，绑定文本只显示在最近添加的文本元素上，而所有其他文本都消失（？）。即使是我引用的主体中编写的原始span标记也不再更新到用户提供的数据（在下面的示例中，您不能告诉最后一部分，因为它是隐藏的）

W3学校代码在此处运行：

函数linkPairing（）{
var divElement=angular.element（document.querySelector（'.transaction'）；
var$hidden=angular.element（document.querySelector（'.hiddenodename'）；
追加（$hidden）；
divElement.append（“
”）；
}   
在输入框中输入一些内容：

姓名：

{{newNodeName}}

{{newNodeName}}

去
{{newNodeName}}

我意识到这种用于添加绑定数据引用的隐藏标记方法可能是非常规的，并且，根据其他问题，显示的引用通常可能由以下内容生成：

var $div = $("<span>{{newNodeName}}</span>");
divElement.append($compile($div)($scope));
$scope.$apply();

var$div=$（“{{newNodeName}}”）；
append（$compile（$div）（$scope））；
$scope.$apply（）；

我尝试了上面的各种方法，但未能获得示例中所示的部分成功。我想我需要更深入地理解角度，尤其是范围，才能成功地使用这种方法。我同时使用jquery和angular，并阅读stackOverflow的观点，以将js模块的负载保持在最小。最初一切都在jquery中，但当我开始使用链接数据显示的特殊功能时，angular中的ng bind数据看起来非常吸引人。我现在不愿意把所有东西都重构成angular.js，因为我不确定最终会成功。这项工作能否按照我的预期进行

下面是一个工作示例：

还有一个片段

在输入框中输入内容


姓名：
去
{{newNodeName}}

{{message}}
{{newNodeName}}

//正在使用控制器初始化myapp
angular.module（“myapp”，[]）.controller（“myctrl”，函数（$scope）{
//$scope中的变量可以在html示例中的插值{{newNodeName}中访问
$scope.message=“”；
$scope.count=0；
$scope.linkPairing=function（）{
$scope.count++；
如果（$scope.count==3）{
$scope.message=“有效吗？如果有效，请向上投票并将其标记为正确”
}
}
});	

[回应Supercol的答案，该答案不适合评论：]

这比我所拥有的更接近，给了我一个阵列解决方案的良好开端（谢谢你，Supercool）。但不完全是我想要的。以下是我从您的代码中获得的状态：

[State 1., after typing "1st" and pressing Go]
input box: 1st
1st

[State 2. after adding "2nd," and pressing Go]
input box: 1st 2nd
1st
1st 2nd

[End State. after adding "3rd," and pressing Go]
input box: 1st 2nd 3rd
1st
1st 2nd
1st 2nd 3rd

我想看到的是：

[State 1., after typing "1st" and pressing Go]
input box: 1st
1st

[State 2. after adding "2nd," and pressing Go]
input box: 1st 2nd
1st 2nd
1st 2nd

[End State. after adding "3rd," and pressing Go]
input box: 1st 2nd 3rd
1st 2nd 3rd
1st 2nd 3rd
1st 2nd 3rd

此外，在按下“Go”键之间的每个按键状态下，所有生成的文本都将镜像输入框中的内容。包括上述示例中的所有这些中间州，倒数第二个是：

[Penultimate state. in the middle of typing out "3rd" and before pressing Go]
input box: 1st 2nd 3r
1st 2nd 3r
1st 2nd 3r

---

我认为我可以获得这种功能，因为我认为（现在仍然是这样吗？）angular的{{reference}}链接到了原始的，并且会自动更新，无论你有多少，当你制作它们时，等等

你试过使用

ng repeat

的方法吗？我没有，没有，但是现在看它，它看起来像是用来显示一组又一组。这可能就是我的代码片段中发生的情况，但在实际页面中，用户可能会选择添加到表单中的许多不同的动态添加分支，其中一些根本不涉及节点名称输入框。您是否建议将所有动态添加推送到一个数组中，并在用户提供的内容发生变化时使用nb repeat从该数组中重新打印页面？您希望看到什么想法以及从我的代码中得到什么“状态”？我的回答与评论不符，因此我给出了答案。另外，我注意到您包含了一个“ng控制器”，我还不明白。这可能是解决方案的关键部分吗？我还要看看ng click和onclick是否不同。是的！就这样！是的，这适用于我给出的测试用例，其中重复了相同的文本元素。谢谢你，超级酷。我现在对你和Anurag注意到的ng重复函数有了更好的理解。这是否比我之前的工作更有效，因为ng repeat div标记都是同时生成的，因为ng repeat div位于html部分而不是javascript中生成的标记中，或者可能是因为您使用了w/a controller和$scope？你认为我可以把你所做的事情用在生成的标签和其他生成的标签之间的间歇性的情况下吗？我改变了答案，检查一下

[Penultimate state. in the middle of typing out "3rd" and before pressing Go]
input box: 1st 2nd 3r
1st 2nd 3r
1st 2nd 3r