angular.js 数据仅显示最近的参考答案

【问题标题】：angular.js data only shows most recent referenceangular.js 数据仅显示最近的参考
【发布时间】：2020-07-03 08:44:34
【问题描述】：

我想要多个文本元素，通过函数动态添加，键控始终显示输入文本字段的内容。相反，绑定的文本仅显示在最近添加的文本元素上，而所有其他文本元素都会消失（？）。即使是我引用的正文中写入的原始 span 标签也不再更新到用户提供的数据（不是说您可以在下面的示例中说出最后一部分，因为它是隐藏的）。

w3school 代码在这里运行：https://www.w3schools.com/code/tryit.asp?filename=GD4AV18UABPF

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  <body>

  <div ng-app="">
 <script>
    function linkPairing() {
        var divElement = angular.element(document.querySelector('.transaction'));
        var $hidden = angular.element(document.querySelector('.hiddenNodeName'));

        divElement.append($hidden);
        divElement.append("<br />");
    }   
  </script>

  <p>Input something in the input box:</p>
  <form>
  <p>Name: <input type="text" ng-model="newNodeName"></p>
  <p>{{newNodeName}}</p>
  <p>{{newNodeName}}</p>
  <button class="addNewTransaction" id="addNewTransaction" type="button" onclick="linkPairing()">Go</button>                
  </form>
  <div hidden><span class="hiddenNodeName" >{{newNodeName}}</span></div>
  <p class="transaction"></p>

  </div>

</body>
</html>

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

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

我尝试了上面的变体，但甚至无法获得示例中看到的部分成功。我怀疑我需要对角度有更深入的了解，尤其是范围，才能通过这种方法取得成功。我同时使用 jquery 和 angular，并阅读 stackOverflow 的意见以将 js 模块负载降至最低。最初一切都在 jquery 中，但是当我使用具有链接数据显示的特殊功能时，Angular 中的 ng-bind 数据看起来非常吸引人。由于不确定我最终是否会成功，我现在不愿意将所有内容重构为 angular.js。这个变通办法可以按我的预期运行吗？

【问题讨论】：

您是否尝试过使用ng-repeat的方法？
我没有，没有，但是现在看它好像是用来展示一个集合的，一个接一个。这可能是我的代码 sn-p 中发生的事情，但在实际页面中，用户可能选择添加到表单中的许多不同的动态添加分支，其中一些不涉及节点名称输入框全部。您是否建议将所有动态添加到数组中，并在用户提供的内容发生更改时使用 nb-repeat 从该数组重新打印页面？

标签： javascript jquery angularjs

【解决方案1】：

这是工作示例：https://www.w3schools.com/code/tryit.asp?filename=GD4KGYTO3RCF

还有一个sn-p

<!DOCTYPE html>
<html>
   <!--module starts surrounds body tag name is myapp -->
  <body ng-app="myapp">
  <!--controller surrounds the  div tag ,A controller is associated with module for functionality purpose-->
  <div ng-controller="myctrl">
  <form >
  Input something in the input box <br><br>
  Name: <input type="text" ng-model="newNodeName">
  <!-- we use ng click  for click in angular js -->
  <button  id="btn-newTransation" type="button"                		
  ng-click="linkPairing()">Go</button>
  
  </form>
  <!-- ng-repeat repeats the html inside it , nodes is array, node is each iteration's value , track by $index to avoid duplication error and get index
  ng-repeat="node in nodes"
  -->
  <!--ng repeat usually expects array but to just repeat an element some time this will work as shortcut-->
  <div ng-repeat="x in [].constructor(count) track by $index" class="nodes">
   <p>{{newNodeName}}</p>
  </div>
  {{message}}
  <!-- i dont know why are you using following tags for -->
  <div hidden>
  <span class="hiddenNodeName">{{newNodeName}}</span></div>
  <p class="transaction"></p>
  </div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<script>
    //initializing the myapp with controller
    angular.module("myapp",[]).controller("myctrl",function($scope){
    //variables in $scope are accessible in html example inside interpolation {{newNodeName}}
     $scope.message="";
    $scope.count=0;
	$scope.linkPairing=function(){ 
     $scope.count++;
     if($scope.count==3){
       $scope.message="Did it work? if it worked please upvote and mark it as correct "
	 }
     }
    });	
</script>
</body>
</html>

【讨论】：

你想看到什么想法以及你从我的代码中得到什么“状态”？
我的回复不适合评论，所以我做了一个答案。另外，我注意到您包含一个“ng-controller”，我还不明白。这可能是解决方案的关键部分吗？我还要看看 ng-click 和 onclick 有没有区别。
是的！就是这样！
是的，这适用于我给出的相同文本元素重复的测试用例。谢谢你，超酷。我现在对您和 Anurag 注意到的 ng-repeat 功能有了更好的了解。这是否适用于我所拥有的，因为 ng-repeat div 标签都是同时生成的，因为 ng-repeat div 在 html 部分中，而不是在 javascript 中生成标签，或者可能是因为你已经完全使用了 angular w / 一个控制器和 $scope？您认为我可以在生成的标签和其他生成的标签之间断断续续的情况下使用您所做的事情吗？

【解决方案2】：

[回应 Supercool 的回答，不适合评论：]

这比我所拥有的更接近，并为我提供了一个阵列解决方案的良好开端（谢谢，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

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

【讨论】：

我已经改变了答案，检查一下